it-swarm.com.ru

Выровняйте два элемента 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

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

69
SivaRajini

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

<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

144
Billy Moat

Используйте классы начальной загрузки col-xx-# и col-xx-offset-#

Так что здесь происходит то, что ваш экран разделен на 12 столбцов. В col-xx-#, # - это количество столбцов, которые вы закрываете, а offset - это количество столбцов, которые вы оставляете. 

Для xx на обычном веб-сайте предпочтительнее md, а если вы хотите, чтобы ваш макет выглядел одинаково на мобильном устройстве, то xs предпочтительнее.

Что я могу сделать из вашего требования,

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

Должен сделать свое дело.

22
Ranveer
<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
Oluwasayo Babalola

Чтобы выровнять два 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>
2
Dev Rathi

Альтернативное решение Bootstrap 4 (таким образом, вы можете использовать div, которые меньше, чем 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>

Больше

2
ErTR

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

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

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

0
Michael Novello