จัดแนว div สองตัวในแนวนอนเคียงข้างกันตรงกลางหน้าโดยใช้ bootstrap css

Question 1

โปรดดูโค้ดด้านล่างสิ่งที่ฉันพยายาม

<div class="row">
  <div class="center-block">First Div</div>
  <div class="center-block">Second DIV </div>
</div>

เอาต์พุต:

First Div
SecondDiv

ผลลัพธ์ที่คาดหวัง:

                      First Div        Second Div

ฉันต้องการจัดแนว div ทั้งสองในแนวนอนให้อยู่กึ่งกลางหน้าโดยใช้ bootstrap css ฉันจะทำอย่างไร ฉันไม่ต้องการใช้ css และแนวคิดแบบลอยตัวเพื่อทำสิ่งนี้ เนื่องจากฉันจำเป็นต้องใช้ bootstrap css เพื่อทำงานในรูปแบบทุกประเภท (เช่นขนาดหน้าต่างและความละเอียดทั้งหมด) แทนที่จะใช้แบบสอบถามสื่อ

Question 2

สิ่งนี้ควรทำเคล็ดลับ:

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            ONE
        </div>
        <div class="col-xs-6">
            TWO
        </div>
    </div>
</div>

อ่านหัวข้อระบบกริดของเอกสาร Bootstrap เพื่อทำความคุ้นเคยกับการทำงานของกริดของ Bootstrap:

http://getbootstrap.com/css/#grid

Question 3

ใช้คลาส bootstrap col-xx-#และcol-xx-offset-#

สิ่งที่เกิดขึ้นที่นี่คือหน้าจอของคุณแบ่งออกเป็น 12 คอลัมน์ ในcol-xx-#, #คือจำนวนของคอลัมน์ที่คุณครอบคลุมและชดเชยเป็นจำนวนคอลัมน์ที่คุณออกจาก

สำหรับxxในเว็บไซต์ทั่วไปmdเป็นที่ต้องการและหากคุณต้องการให้เลย์เอาต์ของคุณมีลักษณะเหมือนกันในอุปกรณ์มือถือขอxsแนะนำ

ด้วยสิ่งที่ฉันสามารถทำได้ตามความต้องการของคุณ

<div class="row">
  <div class="col-md-4">First Div</div>
  <div class="col-md-8">Second DIV </div>
</div>

ควรทำเคล็ดลับ

Question 4

โซลูชัน Bootstrap 4 สำรอง (วิธีนี้คุณสามารถใช้ div ซึ่งมีขนาดเล็กกว่าcol-6 ):

<div class="container">
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

มากกว่า

Question 5

<div class="container">
    <div class="row">
       <div class="col-xs-6 col-sm-6 col-md-6">
          First Div
       </div>
       <div class="col-xs-6 col-sm-6 col-md-6">
          Second Div
       </div>
   </div>

นี่เป็นเคล็ดลับ

Question 6

ในการจัดแนว div สองตัวในแนวนอนคุณต้องรวม Bootstrap สองคลาสเข้าด้วยกัน: นี่คือวิธี:

<div class ="container-fluid">
  <div class ="row">
    <div class ="col-md-6 col-sm-6">
        First Div
    </div>
    <div class ="col-md-6 col-sm-6">
        Second Div
     </div>
  </div>
</div>

Question 7

คำตอบจาก Ranveer (คำตอบที่สองด้านบน) ไม่ได้ผลอย่างแน่นอน

เขาบอกว่าจะใช้col-xx-offset-#แต่นั่นไม่ใช่วิธีการใช้ออฟเซ็ต

หากคุณเสียเวลาของคุณพยายามที่จะใช้col-xx-offset-#เป็นฉันไม่ขึ้นอยู่กับคำตอบของเขา, offset-xx-#การแก้ปัญหาคือการใช้งาน

Question 8

ทางเลือกที่ฉันเขียนโปรแกรม Angular:

    <div class="form-row">
        <div class="form-group col-md-7">
             Left
        </div>
        <div class="form-group col-md-5">
             Right
        </div>
    </div>

Question 9

ฉันแนะนำ css grid บน bootstrap หากสิ่งที่คุณต้องการจริงๆคือการมีข้อมูลที่มีโครงสร้างมากขึ้นเช่นตารางเคียงข้างกันที่มีหลายแถวเพราะคุณไม่ต้องเพิ่มชื่อคลาสสำหรับเด็กทุกคน:

// css-grid: https://www.w3schools.com/css/tryit.asp?filename=trycss_grid
// https://css-tricks.com/snippets/css/complete-guide-grid/
.grid-container {
  display: grid;
  grid-template-columns: auto auto; // 20vw 40vw for me because I have dt and dd
  padding: 10px;
  text-align: left;
  justify-content: center;
  align-items: center;
}

.grid-container > div {
  padding: 20px;
}


<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

css-grid

Question 10

Make sure you wrap your "row" inside the class "container" . Also add reference to bootstrap in your html.
Something like this should work:
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
 <body>
     <p>lets learn!</p>
  <div class="container">
          <div class="row">
              <div class="col-lg-6" style="background-color: red;">
                  ONE
              </div>
              <div class="col-lg-2" style="background-color: blue;">
                  TWO
              </div>
              <div class="col-lg-4" style="background-color: green;">
              THREE
           </div>
          </div>
      </div>
 </body>
 </html>