Главная > Компьютеры > Что такое сетка бутстрап? Блочная система · Bootstrap на русском Bootstrap 3 что такое col md.

Что такое сетка бутстрап? Блочная система · Bootstrap на русском Bootstrap 3 что такое col md.

Используйте нашу мощную мобильную сетку flexbox для создания макетов всех форм и размеров. Используется система «12 колонок», 5-ти адаптивных ярусов, препроцессоров Sass и предустановленных классов.

Как это устроено

Система сеток Bootstrap 4 использует контейнеры, ряды и колонки, чтобы удобно располагать содержимое. Бутстрап реализован с помощью флексбокса и полностью адаптивен. Ниже приведен пример и глубокий взгляд на объединение сетки.

Если вы не знакомы с flexbox, то ознакомьтесь с руководством по флексбоксу CSS Tricks чтобы получить справочную информацию, термины, рекомендаций и фрагменты кода.

Одна из трёх колонок

Одна из трёх колонок Одна из трёх колонок Одна из трёх колонок

В данном примере с помощью наших предустановленных классов сеток были созданы 3 колонки равной ширины для маленьких, средних и больших девайсов. Эти колонки выровнены с помощью родительского класса.container .

Вот небольшое объяснение работы Bootstrap 4:

Параметры сеток

Бутстрап использует em и rem для задания большинства размеров, а пиксели px – для «брейкпойнтов» сетки и ширин контейнеров. Это происходит потому, что ширина зоны видимости на каждом устройстве измеряется в пикселях и не изменяется с размером шрифта .

Посмотрим, как действуют некоторые аспекты системы сеток Bootstrap на разных «ручных» устройствах.

Small
≥576px

≥768px

Large
≥992px

≥1200px

Максимальная
ширина контейнера Префикс класса Число колонок Ширина отступа Может быть вложенным Упорядочивание колонок

None (auto)	540px	720px	960px	1140px
.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-
12
30px (15px с каждой стороны столбца)
Да
Да

Автоматическое расположение с помощью колонок

Используйте классы колонок со специальными контрольными точками (например, .col-sm-6) для легкого расположения колонок без использования явно обозначенных номеров классов.

Равная ширина

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

1 из 2 2 из 2 1 из 3 2 из 3 3 из 3

Столбцы одинаковой ширины могут быть разбиты на несколько строк, но была ошибка флексбокса Safari которая мешала этому работать без явного основания flex-basis или border . Есть обходные пути для более старых версий браузера, но они не должны быть необходимыми, если вы обновлены.

Колонка Колонка Колонка Колонка

Установка ширины одной колонки

Авто-расположение колонок в сетке флексбокса также дает возможность установить ширину одной колонки, при этом остальные «родственные» колонки автоматически изменят свой размер вокруг нее. Вы можете использовать предустановленные классы сеток (как показано внизу), миксины или инлайн-ширину. Заметим, что другие колонки будут изменять размер независимо от ширины центральной колонки.

2 из 3 (широкая)

1 из 3 2 из 3 (широкая) 3 из 3 1 из 3 2 из 3 (широкая) 3 из 3

Содержимое адаптивной ширины

Используйте классы col-{breakpoint}-auto для создания колонок, изменяющих свою ширину по ширине содержимого.

Содержимое адаптивной ширины

1 из 3 3 из 3 1 из 3 Содержимое адаптивной ширины 3 из 3

Мультиряд одинаковой ширины

Создавайте колонки одной ширины, которые охватывают множественные ряды, добавлением.w-100 туда, где необходимо сместить вниз на новую строку. Делайте их адаптивными, применяя.w-100 вместе с некоторыми адаптивными утилитами отображения .

col col col col Адаптивные классы

Сетка Bootstrap включает 5 «ярусов» предопределенных классов, используемых для построения сложного адаптивного контента. Адаптируйте размеры своих колонок для правильного их отображения на всех видах и размерах устройств.

Все брейкпойнты

Для сеток, которые выглядят и располагаются одинаково на всех устройствах любого размера, используйте классы.col и.col-* . Определите именованный класс с цифрой, когда вам нужна колонка определенного размера, во всех остальных случаях свободно пользуйтесь.col .

col col col col col-8 col-4 По горизонтали

Используя один набор из классов.col-sm-* , вы можете создать базовую сетку, которая вначале сложена по вертикали, а потом ее колонки становятся горизонтальными (на экстрамалых девайсах).

col-sm-8 col-sm-4 col-sm col-sm col-sm Ищите и создавайте нужное

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

Col-12 .col-md-8

Col-6 .col-md-4

.col-12 .col-md-8 .col-6 .col-md-4 .col-6 .col-md-4 .col-6 .col-md-4 .col-6 .col-md-4 .col-6 .col-6 Пробелы между колонками

Пробелы между колонками могут быть оперативно отрегулированы с помощью специфических для точки останова отступов и классов полезности отрицательного поля. Чтобы изменить желоба в данной строке, объедините утилиту отрицательного поля в.row и соответствующие утилиты заполнения в.col . Родитель.container или.container-fluid , возможно, также необходимо настроить, чтобы избежать нежелательного переполнения, используя снова подходящую утилиту заполнения.

Вот пример настройки сетки Bootstrap на большой (lg) точке останова и выше. Мы увеличили заполнение.col с помощью.px-lg-5 , противодействовали этому с.mx-lg-n5 на родительском.row , а затем скорректировали обертку.container с помощью.px-lg-5 .

Пользовательская вставка столбцов

Пользовательская вставка столбцов Выравнивание

Используйте утилиты выравнивания flexbox для выравнивания столбцов по вертикали и горизонтали. Internet Explorer 10-11 не поддерживает вертикальное выравнивание элементов Flex, когда контейнер Flex имеет min-height , как показано ниже.

Вертикальное выравнивание

Одна из трёх колонок

Одна из трёх колонок Одна из трёх колонок Одна из трёх колонок Одна из трёх колонок Одна из трёх колонок Одна из трёх колонок Одна из трёх колонок Одна из трёх колонок Одна из трёх колонок

Одна из трёх колонок

Одна из трёх колонок Одна из трёх колонок Одна из трёх колонок

Горизонтальное выравнивание

Одна из двух колонок

Одна из двух колонок Одна из двух колонок Одна из двух колонок Одна из двух колонок Одна из двух колонок Одна из двух колонок Одна из двух колонок Одна из двух колонок Одна из двух колонок Одна из двух колонок

Без пробелов между колонками

Пробелы между колонками в наших предустановленных классах можно удалить с помощью класса.no-gutters , который удаляет отрицательный марждин margin из.row и горизонтальный паддинг padding из всех колонок.

Здесь исходный код для создания этих стилей. Заметим, что переопределения колонок действуют только в первых наследуемых колонках и определяются через селектор атрибута . Этот метод создает более подробный селектор, и паддинг колонки может быть изменен через Отступы .

Нужно создать дизайн «edge-to-edge» (контент плотно прилегает к краям девайса)? Уберите родительский класс.container или.container-fluid .

.no-gutters { margin-right : 0 ; margin-left : 0 ; > .col , > [ class *= "col-" ] { padding-right : 0 ; padding-left : 0 ; } }

Вот как это работает на практике. Заметьте, что вы можете продолжить использовать это со всеми остальными предустановленными классами сеток (включая ширину колонок, «отзывчивые» ярусы, переопределения и прочее).

Col-12 .col-sm-6 .col-md-8

Col-6 .col-md-4

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

Обертка колонки

Если больше 12-ти колонок разместить в одном ряду, каждая дополнительная колонка обернется в новую строку.

Col-4
Поскольку 9 + 4 = 13 > 12, этот div шириной 4 колонки «обернется» в новую строку как смежный юнит.

Col-6
Последующие столбцы продолжаются вдоль новой строки.

.col-9 .col-4
Поскольку 9 + 4 = 13 > 12, этот div шириной 4 колонки «обернется» в новую строку как смежный юнит. .col-6
Последующие столбцы продолжаются вдоль новой строки.

Разрывы колонок

Чтобы сместить колонки на новую строку в гибком контейнере, нужно сделать следующее: добавьте элемент с width: 100% туда, где вы хотите обернуть ваши колонки новой строкой. В норме это достигается с помощью множественных.row , но не каждый исполнительный метод может это поддержать.

Col-6 .col-sm-3

.col-6 .col-sm-3 .col-6 .col-sm-3 .col-6 .col-sm-3 .col-6 .col-sm-3

Col-6 .col-sm-4

.col-6 .col-sm-4 .col-6 .col-sm-4 .col-6 .col-sm-4 .col-6 .col-sm-4

Изменение порядка элементов «Гибкий» порядок

Используйте классы.order- - для контроля над визуальным порядком вашего контента. Эти классы «отзывчивы», так что вы можете задать порядок с помощью order брейкпойнта (например, .order-1.order-md-2). Он поддерживает 1 для 12 через все 5 ярусов.

Первый, но неупорядоченный

Второй, но последний

Третий, но первый

First, but unordered Second, but last Third, but first

Также существует отзывчивый класс.order-first , который быстро изменяет порядок одного элемента применением свойства order: -1 . Этот класс также может применяться с нумерованными классами order-* .

Первый, но неупорядоченный

Второй, но неупорядоченный

Третий, но первый

Первый, но неупорядоченный Второй, но неупорядоченный Третий, но первый

Смещающиеся колонки

Вы можете смещать колонки сетки двумя путями: с помощью отзывчивых классов.offset- и с помощью наших утилит марджинов . Классы сетки созданы так, чтобы совпадать с колонками, а марджины удобней для быстрого расположения элементов там, где ширина офсета непостоянна.

Смещающиеся классы

Двигайте колонки вправо, используя классы.offset-md-* . Они увеличивают левый марджин колонки на * колонок. Например, класс.offset-md-4 двигает.col-md-4 на 4 колонки.

Col-md-4 .offset-md-4

Col-md-3 .offset-md-3

Col-md-6 .offset-md-3

.col-md-4 .col-md-4 .offset-md-4 .col-md-3 .offset-md-3 .col-md-3 .offset-md-3 .col-md-6 .offset-md-3

Col-sm-5 .col-md-6

Col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

Col-sm-6 .col-md-5 .col-lg-6

.col-sm-5 .col-md-6 .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0 .col-sm-6 .col-md-5 .col-lg-6 .col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0 Отодвигая колонки

В БС4, по сравнению с БС3, больше нет офсетных классов v3. Вместо них используйте утилиты марджина, такие как.mr-auto , чтобы заставить «детские» колонки отодвинуться одна от другой. > Level 1: .col-sm-9 Level 2: .col-8 .col-sm-6 Level 2: .col-4 .col-sm-6

«Примеси» SASS

Используя исходные файлы Sass препроцессоров БС, вы имеете возможность использования переменных и «смесей» Sass для создания понятных и «отзывчивых» страниц. Наши предустановленные классы сеток используют эти же файлы и «миксины», получая готовые классы для быстрой адаптивной верстки.

Переменные

Переменные и карты определяют число колонок, ширину отступа и контрольную точку медиа-вызова, на которой колонки начинают вести себя как плавающие. Мы используем эти фичи, чтобы генерировать предустановленные классы сетки, которые описаны выше, и миксины, описанные ниже.

$grid-columns : 12 ; $grid-gutter-width : 30px ; $grid-breakpoints : ( // Extra small screen / phone xs : 0 , // Small screen / phone sm : 576px , // screen / tablet md : 768px , // Large screen / desktop lg : 992px , // Extra large screen / wide desktop xl : 1200px ); $container-max-widths : ( sm : 540px , md : 720px , lg : 960px , xl : 1140px ); «Примеси»

Миксины используются в сочетании с переменными сеток для генерации семантического CSS для колонок индивидуальных сеток.

// Creates a wrapper for a series of columns @include make-row (); // Make the element grid-ready (applying everything but the width) @include make-col-ready (); @include make-col ($size , $columns : $grid-columns ); // Get fancy by offsetting, or changing the sort order @include make-col-offset ($size , $columns : $grid-columns ); Пример использования

Вы можете изменять переменные как вам надо, или просто использовать миксины со значениями по умолчанию. Вот пример использования миксинов, настроенных по умолчанию, для создания двух-колоночного содержимого с разрывом между колонками.

.example-container { width : 800px ; @include make-container (); } .example-row { @include make-row (); } .example-content-main { @include make-col-ready (); @include media-breakpoint-up (sm ) { @include make-col ( Main content Secondary content Настройка сеток

Изменяя встроенные переменные SASS и карты сеток, возможно полностью перенастроить предопределенные классы сеток. Изменяйте количество ярусов, расширения медиаочередей, ширину контейнеров – компилируйте и пользуйтесь.

Колонки и пробелы между ними

Число колонок сетки может быть изменено через переменные SASS. Используйте $grid-columns для генерации ширины (в %) каждой отдельной колонки, а $grid-gutter-width позволяет создавать особые ширины для точек брейкпойнтов отступов колонок, которые разделены ровно через padding-left и padding-right .

$grid-columns : 12 ! default ; $grid-gutter-width : 30px ! default ; «Ярусы» сеток

Вы может также настроить число ярусов сеток. Если вы хотите, к примеру, 4 яруса, настройте $grid-breakpoints и $container-max-widths так:

$grid-breakpoints : ( xs : 0 , sm : 480px , md : 768px , lg : 1024px ); $container-max-widths : ( sm : 420px , md : 720px , lg : 960px );

Внося изменения в переменные SASS или карты, вам необходимо сохранять изменения и компилировать заново. Это позволит создать абсолютно новый набор предустановленных классов сеток с новыми параметрами ширины и порядка колонок. Инструменты «отзывчивой» видимости также обновятся. Обязательно задайте значения сетки в px (не в rem или em и не в %).

01.06.2016

Всем привет!
Продолжаем изучать основы «bootstrap 3» . Пришло время познакомиться в «bootstrap 3» с таким понятием как сетка.
С помощью сетки вы сможете создать свой первый адаптивный каркас сайта (веб-страницы).
Итак, сетка Bootstrap состоит из строк и колонок.

Прежде чем создать колонки, нужно прописать строку. Для этого достаточно прописать тег div с классом «row ».

... здесь будут колонки...

Итак, вначале пишется строка, а в строке уже строятся колонки.

1. Создаем строку:

... здесь будут колонки... ... здесь будут колонки...

2. Создаем колонки (сетку):

Сетка Bootstrap состоит из 12 одинаковых по ширине колонок.
При необходимости колонки можно объединить и разместить в нужной позиции.

Чтобы создать колонки, нужно прописать внутри «row » класс
«col-(*1 )-(*2 ) ».
Там, где (*1 ) указываем, для каких групп устройств нужно выполнить (см. таблицу 1 ).
Там, где (*2 ) указываем число (количество колонок)
(см. таблицу 2 ).

(табл. 1 ) Таблица разметки Bootstrap для различных групп устройств

Давайте рассмотрим до этого момента на примере.
Смотря на таблицу, мы можем создать колонки (построить сетку) для различных групп устройств (мобильных телефонов, планшетов, ПК и т.д.).

Например:

блог сайт

Таким вот образом мы указываем, для каких устройств мы хотим создать колонки.

Теперь разберемся, что такое (*2 ). Так как я уже говорил об этом выше, это число, обозначающее количество колонок
(см. таблицу 2 ).

(табл. 2 ) Схема сетка Bootstrap3

На таблице можно увидеть, что сетка Bootstrap состоит из 12 одинаковых по ширине колонок.
Чтобы указать 12 одинаковых колонок для всех устройств, нужно вместо (*2 ) указать цифру, которая подходит. Но помните, что общая сумма должна получиться 12.

Смотрим пример:

блог сайт Таблица разметки Bootstrap

Чтобы вы поняли мной сказанные слова о том, что общая сумма должна быть равна 12, сделаем арифметический подсчет.
Смотрим на строки №2 и №3.

○ col-lg-12 и col-lg-12 . (размер экрана ≥1200px ).

Результат:

○ col-md-8 и col-md-4 . (размер экрана ≥992px ).
На экране будет две колонки, так как 8 + 4 =12 (как раз ровное количество, из которого состоит сетка).
Левая часть объединит в себе 8 колонок, а правая 4.

Результат:

○ col-sm-6 и col-sm-6 (размер экрана ≥768px ).
На экране будет две колонки, так как 6 + 6 =12 (как раз ровное количество, из которого состоит сетка).
Левая часть объединит в себе 6 колонок и правая 6.

Результат:

○ col-xs-12 и col-xs-12 (размер экрана .col-lg-12, .col-lg-3, .col-lg-4, .col-lg-8, .col-md-12, .col-md-3, .col-md-4, .col-md-8, .col-sm-12, .col-sm-3, .col-sm-4, .col-sm-8, .col-xs-12 { border:1px solid #ccc; height:60px; } Блок 1 Блок 2 Блок 3 Блок 4 Меню Контент

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

Что вы научитесь в этом уроке? В этом уроке вы сможете самостоятельно создать свой первый каркас (шаблон) сайта при помощи Bootstrap сетки.
Сетка Bootstrap состоит из колонок и строк . Чтобы облегчить понимание создания сетки, условно разобьем работу на два этапа.

Этап 1 – создание строк.

Создание сетки нужно начинать с создания строк. Чтобы создать строку, нужно прописать тег div с классом «row» . «row» с англ. означает строка. Строк может быть неограниченное количество, но при создании каждой новой строки к тегу div нужно присваивать класс «row» .

Hello, world! ... ...

Этап 2 – работа с колонками.

Сетка Bootstrap состоит из 12 колонок, все колонки имеют одинаковую ширину.

Колонки можно сливать по несколько штук и размещать их в нужной позиции.

Чтоб слить (совместить) колонки, нужно внутри «row» указать класс «col-md-* » , где * – число, соответствующее количеству колонок, которые соединяем.

содержимое в блоке содержимое в блоке

Важно! При соединении колонок их общее число всегда должно быть равно 12-ти.

1-ый ряд : все 12 колонок, из которых состоит сетка;
2-ой ряд : допустим, нам нужна колонка, ширина которой равна двум стандартным колонкам. Мы слили две колонки, но общее число колонок по-прежнему равно 12-ти.
7-ой ряд : в этом случае нам необходимо было поделить сетку на три равных колонки, для этого мы трижды слили по 4 колонки, что в сумме равно 12.

Итак, как бы вы не разбивали колонки, общая сума прибавленных колонок должна быть 12.

А теперь я переведу схему сетки Bootstrap в код:

Bootstrap Template на сайт .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { border:1px solid #ccc; margin-bottom:30px; height:60px; } Hello, world! .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-2 .col-md-10 .col-md-3 .col-md-9 .col-md-4 .col-md-8 .col-md-5 .col-md-7 .col-md-6 .col-md-6 .col-md-4 .col-md-4 .col-md-4 .col-md-12

Если вы еще ничего не поняли, тогда попробую объяснить так.
Вам нужно 2-х колоночный сайт. Слева сайтбар, справа контент.
Вы уже знаете, что сетка в Bootstrap состроить из 12 колонок.
Пробуем слить 4 колонки в одну.
1колонка + 1колонка + 1колонка + 1колонка = 4колонок
Значить, для сайтбара, класс «col-md-» будет выглядеть так: «col-md-4».
12 (колонок) – 4 (колонки, которые мы объединили) = 8 (колонок осталось).

Значит, для контента, класс «col-md-» будет выглядеть так: «col-md-8»
Вот так выглядит общий код:

содержимое в блоке содержимое в блоке

В Bootstrap есть возможность прописать разные CSS-стили или разбить ячейки по-разному для групп устройств.

Например, я хочу, чтобы моя шапка сайта на больших мониторах была разбита на одну ячейку, но для телефонов я решил сделать две ячейки и прописать к ним же другой CSS-стиль. Уловили мысль?
Посмотрите, какие классы вы можете использовать для различных групп устройств и какие особенности имеет каждый класс.

Таблица разметки Bootstrap для различных групп устройств

Очень маленькие устройство
Телефоны ( .col-md-1, .col-md-8, .col-md-4, .col-md-6, .col-md-3, .col-md-12 { border:1px solid #ccc; height:60px; } Блок 1 Блок 2 Блок 3 Блок 4 Меню Контент

Результат вы можете посмотреть . Если хотите, можете поменять размер экрана или открыть страницу результата через разные группы устройств.

Стремительно развивающиеся технологии заставляют нас идти в ногу со временем. Если раньше дизайн создавался на чистом HTML и CSS коде, то сегодня время библиотек кода.

Многие фронт энд разработчики, которые ценят свое время, давно уже используют шаблонизаторы, сетчастые структуры, SESS, LESS, Bootstrap и другие решения. Это правильно, зачем усложнять себе жизнь, когда есть готовые коллекции и реализации задач.

Сегодня мы рассмотрим, как просто можно создавать блочные сетки на bootstrap 3.0. Хотя с уверенностью могу сказать, через пол года, нужно будет вникать в новую 4 версию бутстрапа.

Кто еще не знаком с Bootstrap?

Bootstrap - это библиотека CSS кода, предоставлена компанией Твиттер и распространяется бесплатно. Значительно упрощает жизнь веб дизайнеру. В архиве прилагается небольшое дополнение в виде js файла. Подробнее об установке и использовании можно узнать на официальном сайте.

Примеры решений: http://getbootstrap.com/components/ - табы, стилизация таблиц, всплывающие окна, навигация, менюшки, вертикальные списки, кнопки, иконки и другие прелести. Тоже на англ. языке.

Что нужно знать прежде о сетках bootstrap?

Ранее, во второй версии бутстрапа, были лишь некоторые дополнения для мобильных решений. В третей версии — весь фреймверк изначально адаптирован под различные устройства: мобильные, планшеты, десктопы. Сейчас проясниться:)

Почти весь функционал бутстрапа осуществляется через использование элементарных классов.

Весь код body контента содержится в специальном div блоке. Он может быть фиксированной ширины .container , или полноэкранным.container-fluid .

Сеточная система

Состоит из 12 ячеек, каждая из которых является div блоком, в строке.row.

Теперь посмотрите таблицу ниже, чтобы было легче понимать следующие куски кода.

В зависимости от префикса, мы будет создавать сетку для необходимого устройства.

Внимание! Можно создавать сетку изначально ориентируясь на несколько устройств одновременно. Достигается это путем комбинирования префиксов.

Пример 1. Создадим некие сетки только для десктопных устройств:

.col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-8 .col-md-4 .col-md-4 .col-md-4 .col-md-4 .col-md-6 .col-md-6

Пример 2 . А теперь скомбинируем сетку для десктопа и мобильного одновременно:

.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

Bootstrap включает в себя мощную mobile-first блочная система макетов здания любых форм и размеров. Он основан на столбец 12 разметка и имеет несколько уровней, по одному для каждой медиа диапазона запроса . Вы можете использовать его с Sass примесей или наших предопределенных классов.

Как это работает

На высоком уровне, блочная система работает так:

Существует три основных компонента-контейнера, строки и столбцы.
Контейнеры- .container для фиксированной ширины или.container-fluid на полную ширину-центр содержание вашего сайта и помочь выровнять грид Содержание.
«Rows» - горизонтальные группы столбцов, которые обеспечивают выравнивание столбцов.
Контент должен быть помещен в столбцах, и только колонки могут быть непосредственными потомками строк.
Классы столбце указано количество столбцов, которые вы хотите использовать из 12 возможных в ряду. Так что если вы хотите три равные ширины столбцов, нужно использовать.col-sm-4 .
Столбец width устанавливаются в процентах, так они всегда изменчивый и размерами по отношению к родительскому элементу.
Столбцы имеют горизонтальную padding для создания промежутка между отдельными столбцами.
Есть пять грид уровней, по одному для каждой aдаптивные точки останова : сверхмалые, малые, средние, большие, и очень большие.
Грид уровни основываются на минимальной ширине, то есть они применяются к ярусу и всем, кто выше его (например, .col-sm-4 применим для малых, средних, больших, и очень больших устройств).
Вы можете использовать предопределенные грид классов или Sass примеси для более семантической разметки.

Звучит хорошо? Отлично, давайте перейдем к видя все это в пример.

Пример быстрого запуска

Если вы используете Bootstrap скомпилированный CSS, в этом примере вы хотите, чтобы начать с.

One of three columns

One of three columns One of three columns One of three columns

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

Функционал разметки

При Bootstrap использует em s или rem s для определения большинства размеров, px s применяются для грид точки останова и ширины контейнера. Это происходит потому, что Ширина области просмотра в пикселях и не меняется с размером шрифта .

Смотри как аспекты Bootstrap блочная система работают на нескольких устройствах с таблица.

Сверхмалые
.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-sm-* класса.

Col-xs-12 .col-sm-6 .col-md-8

Col-xs-6 .col-md-4

Col-xs-6 .col-sm-4

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

Пример: Колонка wrapping

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

Col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.

Col-xs-6
Subsequent columns continue along the new line.

.col-xs-9 .col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit. .col-xs-6
Subsequent columns continue along the new line.

Пример: Адаптивный столбец сброса

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

Col-xs-6 .col-sm-3

.col-xs-6 .col-sm-3 .col-xs-6 .col-sm-3 .col-xs-6 .col-sm-3 .col-xs-6 .col-sm-3

В дополнение к очистке столбца на адаптивных точках, вам может понадобиться сброс offsets, pushes, или pulls . Смотрите это в действии на

Статьи по теме:

Как разблокировать телефон "Мегафона" для других операторов?

Как разблокировать от оператора ваш Мегафон Login 2 1. Вставляете сим-карту другого сотового оператора в телефон. 2. Включаете Мегафон Login 2 (Megafon Login 2 MS3A) . 3. Должно появится окно для ввода кода разблокировки . 4. Вводите код: 67587048 5. Теп

Asus ZenFone Max ZC550KL — Советы, рекомендации, часто задаваемые вопросы и полезные параметры

Как вставить SIM-карту на свой Asus ZenFone Max? Asus ZenFone Max — это смартфон с двумя SIM-картами и поддерживает соединение 2G / 3G / 4G. SIM-карта, поддерживаемая устройством, является Micro SIM-картой и может быть видна после снятия задней крышки тел

Что такое расширение файла CDR?

CDR-формат — это файл, который был создан в программе Corel DRAW, содержащей растровое или векторное изображение. Компания Corel использует этот формат в собственных продуктах, поэтому его можно открыть также другим программным обеспечением данной компани

Multisim 17 где находится библиотека элементов

Компоненты и библиотеки элементов Multisim 11 Контрольно-измерительные и индикаторные приборы В Multisim имеются измерительные приборы, каждый из которых можно использовать в схеме только один раз. Эти приборы расположены в библиотеке контрольно-из