Bootstrap Grid — с накоплением по горизонтали
Пример сетки Bootstrap: с накоплением по горизонтали
Мы создадим базовую систему сетки, которая сначала будет складываться на очень маленьких устройствах, а затем станет горизонтальной на больших устройствах.
В следующем примере показан простой макет с двумя столбцами «стопкой по горизонтали», что означает, что он приведет к разделению 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>