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

90

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

<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 для работы со всеми видами макетов (то есть со всеми размерами окон и разрешениями) вместо использования медиа-запросов.

html css twitter-bootstrap ШиваРаджини
источник

Ответы:

193

Это должно помочь:

<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

Билли Моут
источник
1
Спасибо. могу я узнать, что такое col-xs-6? id div count увеличивается означает, как это изменить
SivaRajini 03
2
col-xs-6 выделяет половину доступной сетки из 12 столбцов. Если вы читаете документы Bootstrap, на которые я ссылался в своем ответе, все это должно иметь смысл после некоторых проб и ошибок с вашей стороны :-)
Билли Моут
1
Почему xsи нет md?
Александр
5
@Alexander - использование xs означает, что два div будут располагаться бок о бок на всех размерах экрана от мобильного до настольного.
Билли Моут,
1
Хорошо, так что хз для всех решений и например lg только для более высоких решений?
Александр
29

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

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

Ранвир
источник
7

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

Больше

ErTR
источник
4 
<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

Чтобы выровнять два 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>
Дев Рати
источник
0

Ответ Ранвира (второй ответ выше) абсолютно НЕ работает.

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

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

Майкл Новелло
источник
0

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

    <div class="form-row">
        <div class="form-group col-md-7">
             Left
        </div>
        <div class="form-group col-md-5">
             Right
        </div>
    </div>
серж клоков
источник
0

Я рекомендую CSS-сетку вместо начальной загрузки, если вы действительно хотите иметь более структурированные данные, например, параллельную таблицу с несколькими строками, потому что вам не нужно добавлять имя класса для каждого дочернего элемента:

// 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-сетка

Юцю Г.
источник
0 
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>
Шиджита
источник