Bootstrap css kullanarak iki div'i sayfanın ortasına yatay olarak yan yana hizalayın

Question 1

Lütfen denediğimi aşağıdaki koda bakın

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

çıktı :

First Div
SecondDiv

Beklenen çıktı :

                      First Div        Second Div

bootstrap css kullanarak iki div'i sayfaya yatay olarak ortalamak istiyorum. bunu nasıl yapabilirim ? Bunu yapmak için basit css ve kayan kavram kullanmak istemiyorum. çünkü ortam sorgusu kullanmak yerine her tür düzende (yani tüm pencere boyutu ve çözünürlüklerde) çalışmak için bootstrap css'i kullanmam gerekiyor.

Question 2

Bu hile yapmalı:

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

Bootstrap'ın ızgaralarının nasıl çalıştığını öğrenmek için Bootstrap belgelerinin ızgara sistemi bölümünü okuyun:

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

Question 3

Bootstrap sınıflarını kullanın col-xx-#vecol-xx-offset-#

Yani burada olan şey, ekranınız 12 sütuna bölünüyor. İçinde col-xx-#, #kapladığınız sütun sayısı ve ofset, bıraktığınız sütun sayısıdır.

Çünkü xxgenel bir web sitesinde mdtercih edilir ve mobil bir cihazda da düzeninizin aynı görünmesini istiyorsanız xstercih edilir.

Senin ihtiyacınla ne yapabilirim

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

Hile yapmalı.

Question 4

Alternatif Bootstrap 4 çözümü (bu şekilde col-6'dan daha küçük div'leri kullanabilirsiniz ):

<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>

Daha

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>

Bu hile yapar.

Question 6

İki div'i yatay olarak hizalamak için iki Bootstrap sınıfını birleştirmeniz yeterlidir: İşte bunu nasıl yapacağınız:

<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 tarafından sağlanan yanıt (yukarıdaki ikinci cevap) kesinlikle işe yaramıyor.

Kullanmamı söylüyor col-xx-offset-#ama ofsetler böyle kullanılmıyor.

col-xx-offset-#Onun cevabına göre yaptığım gibi , kullanmaya çalışırken zamanınızı boşa harcadıysanız , çözüm kullanmaktır offset-xx-#.

Question 8

Angular programlama yaptığım alternatif:

    <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

Gerçekten istediğiniz şey daha yapılandırılmış verilere sahip olmaksa, örneğin birden çok satır içeren yan yana bir tabloya sahip olmaksa css grid over bootstrap'i öneririm, çünkü her çocuk için sınıf adı eklemeniz gerekmez:

// 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 ızgarası

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>