Примеры сетки Bootstrap
Ниже мы собрали несколько примеров базовых макетов сетки Bootstrap.
Три равных столбца
В следующем примере показано, как получить три столбца одинаковой ширины, начиная с планшетов и масштабируя их до больших настольных компьютеров. На мобильных телефонах столбцы автоматически складываются:
Пример
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
Три неравных столбца
В следующем примере показано, как получить три столбца различной ширины, начиная с планшетов и масштабируя их до больших настольных компьютеров:
Пример
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
Две неравные колонки
В следующем примере показано, как получить два столбца разной ширины, начиная с планшетов и масштабируя их до больших настольных компьютеров:
Пример
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
Нет желобов
Используйте .row-no-guttersкласс, чтобы удалить желоба из строки и ее столбцов:
Пример
<div class="row row-no-gutters">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
Два столбца с двумя вложенными столбцами
В следующем примере показано, как получить два столбца, начиная с планшетов и масштабируя их до больших настольных компьютеров, с еще двумя столбцами (равной ширины) внутри большего столбца (на мобильных телефонах эти столбцы и их вложенные столбцы будут складываться):
Пример
<div class="row">
<div class="col-sm-8">
.col-sm-8
<div class="row">
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-6">.col-sm-6</div>
</div>
</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
Смешанный: мобильный и рабочий стол
Сеточная система Bootstrap имеет четыре класса: xs (телефоны), sm (планшеты), md (рабочие столы) и lg (большие рабочие столы). Классы можно комбинировать для создания более динамичных и гибких макетов.
Совет: Каждый класс масштабируется, поэтому, если вы хотите установить одинаковую ширину для xs и sm, вам нужно указать только xs.
Пример
<div class="row">
<div class="col-xs-9 col-md-7">.col-xs-9 .col-md-7</div>
<div class="col-xs-3 col-md-5">.col-xs-3 .col-md-5</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-10">.col-xs-6 .col-md-10</div>
<div class="col-xs-6 col-md-2">.col-xs-6 .col-md-2</div>
</div>
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
Совет: помните, что в столбцах сетки должно быть до двенадцати строк. Более того, столбцы будут складываться независимо от области просмотра.
Смешанный: мобильный, планшет и рабочий стол
Пример
<div class="row">
<div class="col-xs-7 col-sm-6 col-lg-8">.col-xs-7 .col-sm-6 .col-lg-8</div>
<div class="col-xs-5 col-sm-6 col-lg-4">.col-xs-5 .col-sm-6 .col-lg-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-8 col-lg-10">.col-xs-6 .col-sm-8 .col-lg-10</div>
<div class="col-xs-6 col-sm-4 col-lg-2">.col-xs-6 .col-sm-4 .col-lg-2</div>
</div>
Очистить поплавки
Очистите поплавки (вместе с .clearfixклассом) в определенных точках останова, чтобы предотвратить странное наложение с неравномерным содержимым:
Пример
<div class="row">
<div class="col-xs-6 col-sm-3">
Column 1
<br>
Resize the browser window to see the effect.
</div>
<div class="col-xs-6 col-sm-3">Column 2</div>
<!-- Add clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">Column 3</div>
<div class="col-xs-6 col-sm-3">Column 4</div>
</div>
Смещение столбцов
Переместите столбцы вправо, используя .col-md-offset-*классы. Эти классы увеличивают левое поле столбца на * столбцы:
Пример
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
</div>
Push And Pull — изменение порядка столбцов
Измените порядок столбцов сетки с помощью .col-md-push-*и
.col-md-pull-*классов:
Пример
<div class="row">
<div class="col-sm-4 col-sm-push-8">.col-sm-4 .col-sm-push-8</div>
<div class="col-sm-8 col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div>
</div>