Выровняйте два div горизонтально бок о бок к странице с помощью бутстрапа css

Пожалуйста, см. ниже код, который я пробовал

<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

Я хочу выровнять два divs по горизонтали по центру с помощью bootstrap css. Как я могу это сделать? Я не хочу использовать простые css и плавающие концепции для этого. потому что мне нужно использовать bootstrap css для работы во всех типах макетов (т.е. все размеры и разрешения окна) вместо использования медиа-запроса.

Ответы

Ответ 1

Это должно сделать трюк:

<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

Ответ 2

Используйте классы 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>

Должен сделать трюк.

Ответ 3

Альтернативное решение 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>

Подробнее

Ответ 4

Чтобы выровнять два divs по горизонтали, вам просто нужно объединить два класса 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>

Ответ 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>

Это делает трюк.

Ответ 6

Ответ, предоставленный Ranveer (второй ответ выше), абсолютно НЕ работает.

Он говорит использовать col-xx-offset-#, но это не то, как используются смещения.

Если вы потратили время на попытки использовать col-xx-offset-#, как я и сделал, основываясь на его ответе, решение состоит в том, чтобы использовать offset-xx-#.

Ответ 7

Альтернатива, которую я делал программированием Angular:

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