Bootstrap сетки Пример: Набранная к горизонтальной
Мы создадим базовую систему сетки, которая начинается укладывают на мобильные телефоны / таблетки (небольшие устройства), прежде чем стать горизонтально на рабочих столах (средних / больших устройств).
В следующем примере показан простой "сложенных к горизонтальной" две колонки, а это означает, что приведет к / 50% раскола на всех экранах 50%, на дополнительных небольших экранов, которые он будет автоматически Stack (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> Попробуй сам "