Три равных столбца

Получите три столбца одинаковой ширины, начиная с рабочих столов и масштабируя их до больших компьютеров . На мобильных устройствах, планшетах и ​​более ранних версиях столбцы будут автоматически складываться.

.col-md-4
.col-md-4
.col-md-4

Три неравных столбца

Получите три столбца , начиная с рабочих столов и масштабируя их до больших рабочих столов различной ширины. Помните, что столбцов сетки должно быть до двенадцати для одного горизонтального блока. Более того, столбцы начинают складываться независимо от области просмотра.

.col-md-3
.col-md-6
.col-md-3

Две колонки

Получите два столбца , начиная с рабочих столов и масштабируя их до больших рабочих столов .

.col-MD-8
.col-md-4

Полная ширина, один столбец

Для элементов полной ширины не требуются классы сетки.


Два столбца с двумя вложенными столбцами

Согласно документации, вложение очень просто — просто поместите ряд столбцов в существующий столбец. Это дает вам два столбца, начиная с рабочих столов и масштабируясь до больших рабочих столов , а еще два (равной ширины) находятся внутри большего столбца.

При размерах мобильных устройств, планшетов и ниже эти столбцы и их вложенные столбцы будут складываться.

.col-MD-8
.col-md-6
.col-md-6
.col-md-4

Смешанный: мобильный и настольный

Система сетки Bootstrap 3 имеет четыре уровня классов: xs (телефоны), sm (планшеты), md (настольные компьютеры) и lg (большие рабочие столы). Вы можете использовать почти любую комбинацию этих классов для создания более динамичных и гибких макетов.

Каждый уровень классов масштабируется, то есть, если вы планируете установить одинаковую ширину для xs и sm, вам нужно указать только xs.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

Смешанный: мобильный, планшетный и настольный

.col-xs-12 .col-sm-6 .col-lg-8
.col-sm-6 .col-lg-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

Очистка столбца

Очистите плавающие элементы в определенных точках останова, чтобы предотвратить неудобную обертку с неравномерным содержимым.

.col-xs-6 .col-sm-3
Измените размер окна просмотра или проверьте его на своем телефоне для примера.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Смещение, push и pull сбросы

Сброс смещения, push и pull в определенных точках останова.

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-смещение-2 .col-md-6 .col-md-смещение-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-смещение-2 .col-lg-6 .col-lg-смещение-0