Выровняйте два дива по горизонтали бок о бок по центру страницы с помощью bootstrap 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 для работы во всех видах макетов (т. е. во всех размерах и разрешениях окон ) вместо использования медиа-запроса.

5 61
html css twitter-bootstrap

5 ответов:

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

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

прочтите раздел grid system документов Bootstrap, чтобы ознакомиться с тем, как работают сетки Bootstrap:

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

133

использовать классы начальной загрузки 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>

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

20

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

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

2

альтернативное решение Bootstrap 4 (таким образом, вы можете использовать divs, которые меньше, чем col-6):

Horizontal Align Center

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

больше

0