Сетка Bootstrap с накоплением по горизонтали
Пример сетки Bootstrap: стек по горизонтали
Мы создадим базовую систему Grid, которая начнет складываться на дополнительных небольших устройствах, прежде чем стать горизонтальной на больших устройствах.
В следующем примере показан простой макет с двумя колонками с накоплением по горизонтали, что означает, что на всех экранах будет разбито 50% на 50%, за исключением лишних маленьких экранов, которые будут автоматически складываться (100%):
Пример: стек по горизонтали
<div class="container">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Совет: Числа в классах .col-sm-* указывают количество столбцов, которые должен охватывать Div (из 12). Таким образом, .col-sm-1 пролетов 1 столбец, .col-sm-4 пролетов 4 колонки, .col-sm-6 пролетов 6 столбцов и т.д.
Примечание: Убедитесь, что сумма всегда добавляет до 12!
Совет: Любой макет с фиксированной шириной можно превратить в макет с полной шириной , изменив .container класс на .container-fluid :
Пример: жидкий контейнер
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
