Bootstrap Бутстрап 4 Grid Examples

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮ Назад Дальше ❯

---

Ниже мы собрали несколько примеров схем Bootstrap 4 Grid.

---

Три равные колонки

Используйте .col класс на заданном количестве элементов, и Bootstrap распознает количество элементов (и создает столбцы с одинаковой шириной). В приведенном ниже примере мы используем три элемента Col, который получает ширину 33,33% каждый.

col

col

col

Пример

<div>
  <div>col</div>
  <div>col</div>
  <div class=»col»>col</div>
</div>

---

Три равных столбца с использованием чисел

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

col-4

col-4

col-4

Пример

<div>
  <div>col-4</div>
  <div>col-4</div>
  <div class=»col-4″>col-4</div>
</div>

---

Три неравные колонки

Для создания неравных столбцов необходимо использовать числа. В следующем примере будет создано 25% 50% от 25% Сплита:

col-3

col-6

col-3

Пример

<div>
  <div>col-3</div>
  <div>col-6</div>
  <div class=»col-3″>col-3</div>
</div>

---

---

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

Тем не менее, достаточно установить ширину одного столбца и автоматически изменять размер столбцов. В следующем примере будет создано 25% 50% от 25% Сплита:

col

col-6

col

Пример

<div>
  <div>col-3</div>
  <div>col-6</div>
  <div class=»col»>col-3</div>
</div>

---

Более равные столбцы

1 of 2

2 of 2

1 of 4

2 of 4

3 of 4

4 of 4

1 of 6

2 of 6

3 of 6

4 of 6

5 of 6

6 of 6

Пример

<!— Two equal columns —>
<div>
  <div>1 of 2</div>

  <div>2 of 2</div>
</div>

<!— Four equal columns —>
<div>
  <div>1 of 4</div>
  <div>2 of 4</div>
  <div>3 of 4</div>
  <div>4 of 4</div>
</div>

<!— Six equal columns —>
<div>
  <div>1 of 6</div>
  <div>2 of 6</div>
  <div>3 of 6</div>
  <div>4 of 6</div>  
  <div>5 of 6</div>
  <div>6 of 6</div>
</div>

---

Больше неравных столбцов

1 of 2

2 of 2

1 of 4

2 of 4

3 of 4

4 of 4

1 of 4

2 of 4

3 of 4

4 of 4

Пример

<!— Two Unequal Columns —>
<div>
  <div>1 of 2</div>
  <div>2 of 2</div>
</div>

<!— Four Unequal Columns —>
<div>
  <div>1 of 4</div>
  <div>2 of 4</div>
  <div>3 of 4</div>
  <div>4 of 4</div>
</div>

<!— Setting two column widths —>

<div>
  <div>1 of 4</div>
  <div>2 of 4</div>
  <div>3 of 4</div>
  <div>4 of 4</div>
</div>

---

Одинаковая высота

Если один из столбцов выше, чем другой (из-за текста или CSS высота), остальное будет следовать:

Lorem ipsum dolor sit amet, cibo sensibus interesset no sit. Et dolor possim volutpat qui. No malis tollit iriure eam, et vel tale zril blandit, rebum vidisse nostrum qui eu. No nostrud dolorem legendos mea, ea eum mucius oporteat platonem.Eam an case scribentur, ei clita causae cum, alia debet eu vel.

col

col

Пример

<div>
  <div>Lorem ipsum…</div>
  <div>col</div>
  <div>col</div>
</div>

---

Вложенные столбцы

В следующем примере показано, как создать компоновку двух столбцов с двумя столбцами внутри одного из столбцов:

Пример

<div>
  <div>
    .col-8
    <div>
      <div>.col-6</div>
      <div>.col-6</div>
    </div>
  </div>
  <div>.col-4</div>
</div>

---

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

Система Grid Bootstrap 4 имеет пять классов:

• .col- (дополнительные малые устройства-ширина экрана менее 576пкс)
• . col-sm- (малые устройства-ширина экрана равна или больше, чем 576пкс)
• .col-md- (средние устройства-ширина экрана, равная или превышающая 768px)
• .col-lg- (большие устройства-ширина экрана равна или больше, чем 992пкс)
• .col-xl- (XLarge устройства-ширина экрана, равная или превышающая 1200px)

Приведенные выше классы можно комбинировать для создания более динамичных и гибких макетов.

Совет: Каждый класс масштабируется вверх, так что если вы хотите установить одинаковую ширину sm и md, вы только должны указать sm.

---

Укладываются в горизонтальную

col-sm-9

col-sm-3

col-sm

col-sm

col-sm

В следующем примере показано, как создать макет столбца, который начинается с стека на дополнительных малых устройствах, прежде чем стать горизонтальным на больших устройствах (SM, MD, LG и XL):

Пример

<div>
  <div>col-sm-9</div>
  <div>col-sm-3</div>
</div>
<div>
  <div class=»col-sm»>col-sm</div>
  <div>col-sm</div>
  <div>col-sm</div>
</div>

---

Смешивать и сочетать

col-6 col-sm-9

col-6 col-sm-3

col-7 col-lg-8

col-5 col-lg-4

col-sm-3 col-md-6 col-lg-4

col-sm-9 col-md-6 col-lg-8

Пример

<!— 50%/50% split on extra small devices and 75%/25% split on larger devices —>
<div>
  <div>col-6 col-sm-9</div>
  <div>col-6 col-sm-3</div>
</div>

<!— 58%/42% split on extra small, small and medium devices and 66.

3%/33.3% split on large and xlarge devices —>
<div>
  <div>col-7 col-lg-8</div>
  <div>col-5 col-lg-4</div>
</div>

<!— 25%/75% split on small devices, a 50%/50% split on medium devices, and a 33%/66% split on large and xlarge devices. On extra small devices, it will automatically stack (100%) —>
<div class=»row»>
  <div>col-sm-3 col-md-6 col-lg-4</div>
  <div>col-sm-9 col-md-6 col-lg-8</div>
</div>

---

Нет водосточных желобов

Добавьте .no-gutters класс в .row контейнер для удаления водосточных желобов (дополнительное пространство):

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Пример

<div>

❮ Назад Дальше ❯

bootstrap 4 популярное

bootstrap сетка
bootstrap меню
bootstrap modal модальное окно
блоки bootstrap
bootstrap скачать бесплатно
bootstrap кнопки
bootstrap формы
bootstrap таблицы
bootstrap примеры

---

---

Copyright 2018-2020 HTML5CSS.ru

Правила и Условия Политика конфиденциальности О нас Контакты

Как правильно выставить 4 или 3 ячейки в ряд в bootstrap? — Хабр Q&A

<div>
  <div>
     <div></div>
     <div></div>
     <div></div>
  </div>
</div>

Либо

<div>
  <div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
  </div>
</div>

У вас в строке должно быть в сумме 12. То есть 3+3+3+3 либо 4+4+4

Ответ написан 2016, в 12:33″> более трёх лет назад

Комментировать

Есть несколько вариантов, что бы сделать отступы. Наглядно можно посмотреть тут — https://jsfiddle.net/533pnb2u/
1 Вариант
4 ячейки шириной в 2 столбца и отступами в 2 столбца (2 + 4*2 + 2 = 12).

<div>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

3 ячейки шириной в 2 столбца и отступами в 3 столбца (3 + 3*2 + 3 = 12).

<div>
  <div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

2 Вариант
4 ячейки шириной в 3 столбца (4*3) с отступом в половину расстояния между столбцами за счет отсутствия обертки . row. На 3 ячейки разбивка по аналогии.

<div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

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

<div>
  <div>
    <div>
      <div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div> 
  </div>
</div>

Ответ написан более трёх лет назад

Комментировать

Col-md-offset-1 это смещение на 1 ячейку слева. Всего их 12. Читайте доки. И понятно, что если вы 4+ 1+ 4+ 1+ 4+ 1 +3 конечно будет больше 12 и всё поедет. Читайте доки.
+ class row для строки.

Ответ написан

более трёх лет назад

Комментировать

{{ title }}

Базовые макеты сетки, которые помогут вам познакомиться со сборкой в ​​системе сетки Bootstrap.

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

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

.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-xs-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

---

Сброс смещения, выталкивания и извлечения

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

.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

Что такое основы сетки Bootstrap 4?

Akande Olalekan Toheeb

Grokking the Behavioral Interview

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

Сеточная система Bootstrap 4 пригодится, когда вы хотите создать адаптивный веб-сайт. Система сетки Bootstrap 4 построена на flexbox и позволяет размещать до 12 столбцов на странице. 12 столбцов можно сгруппировать для создания более широких столбцов, если вы не хотите использовать 12 столбцов по отдельности.

Колонки автоматически перестраиваются в зависимости от размера экрана. Сетка Bootstrap 4 — это адаптивная система, которая представляет собой простой инструмент для создания адаптивных макетов.

Классы

Сеточная система Bootstrap 4 имеет пять классов, чтобы упростить нашу работу.

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

1. .col- ( сверхмалых устройств — ширина экрана менее 576px ).

2. .col-sm- ( малых устройств — ширина экрана равна или больше 576px ).

3. .col-md- ( средней ширины — ширина экрана равна или больше 768px ).

4. .col-lg- ( большие устройства — ширина экрана равна или больше 992px ).

5. .col-xl- ( очень большие устройства — ширина экрана равна или больше 1200px ).

Эти классы можно комбинировать для создания более динамичных и гибких макетов.

Создание базовой сетки Bootstrap 4

Существует два метода создания базовой сетки:

Вот шаги для создания базовой сетки:

1. Создайте строку , создав элемент div , который содержит class="row" .

2. Создайте еще один div с любым из классов сетки (sm, md, lg, xl).

Первая часть после столбца представляет скорость отклика (sm, md, lg или xl), а вторая часть представляет собой число, которое в сумме должно составлять 12 для каждой строки. (проверьте содержимое кода)

Наконечники

1. Не добавляйте число в каждый .col, если вы хотите, чтобы Bootstrap автоматически обрабатывал макет. Итак, чтобы создать два одинаковых столбца, добавьте только два элемента «col». Количество элементов «col» равно количеству желаемых столбцов.

2. Используйте любой из классов сетки (.col-sm| md| lg| xl), чтобы сделать столбцы отзывчивыми.

CSS-сетка · Bootstrap v5.1

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

Внимание! Наша система CSS Grid является экспериментальной и поддерживает версию 5.1.0! Мы включили ее в CSS нашей документации, чтобы продемонстрировать ее вам, но по умолчанию она отключена. Продолжайте читать, чтобы узнать, как включить его в свои проекты.

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

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

• CSS Grid включен. Отключите сетку по умолчанию, установив $enable-grid-classes: false, и включите CSS Grid, установив $enable-cssgrid: true. Затем перекомпилируйте свой Sass.

• Замените экземпляры .row на .grid. Класс .grid устанавливает display: grid и создает grid-template, который вы создаете с помощью вашего HTML.

• Замените классы .col-* классами .g-col-*. Это потому, что наши столбцы CSS Grid используют свойство grid-column вместо width.

• Столбцы и размеры желоба устанавливаются с помощью переменных CSS. Задайте их в родительском .grid и настройте, как хотите, встроенным или в таблице стилей, с помощью --bs-columns и --bs-gap.

В будущем Bootstrap, вероятно, перейдет к гибридному решению, поскольку свойство gap обеспечило почти полную поддержку браузером flexbox.

Ключевые отличия

Сравнение с сеткой по умолчанию:

• Утилиты Flex не влияют на столбцы CSS Grid таким же образом.

• Заменяет зазоры водосточные желоба. Свойство gap заменяет горизонтальный padding из нашей системы сетки по умолчанию и работает больше как margin.

• Таким образом, в отличие от .row, .grid не имеет отрицательного отступа, и утилиты отступа не могут использоваться для изменения промежутков сетки. Промежутки сетки по умолчанию применяются по горизонтали и вертикали. Смотрите раздел кастомизации для получения более подробной информации.

• Встроенные и пользовательские стили следует рассматривать как замену для классов модификаторов (например, style="--bs-columns: 3;" против class="row-cols-3").

• Вложение работает аналогично, но может потребовать от вас сбросить счетчик столбцов для каждого экземпляра вложенного файла .grid. Смотрите раздел вложенности для получения подробной информации.

Примеры

Три колонки

Три столбца одинаковой ширины во всех окнах просмотра и на всех устройствах могут быть созданы с помощью классов . g-col-4. Добавьте отзывчивые классы, чтобы изменить макет по размеру области просмотра.

.g-col-4

.g-col-4

.g-col-4

<div>
  <div>.g-col-4</div>
  <div>.g-col-4</div>
  <div>.g-col-4</div>
</div>

Адаптивность

Используйте адаптивные классы, чтобы настроить макет во всех окнах просмотра. Здесь мы начинаем с двух столбцов на самых узких окнах просмотра, а затем увеличиваем до трех столбцов на средних и выше.

.g-col-6 .g-col-md-4

.g-col-6 .g-col-md-4

.g-col-6 .g-col-md-4

<div>
  <div>.g-col-6 .g-col-md-4</div>
  <div>.g-col-6 .g-col-md-4</div>
  <div>.g-col-6 .g-col-md-4</div>
</div>

Сравните это с макетом из двух столбцов во всех окнах просмотра.

.g-col-6

.g-col-6

<div>
  <div>.g-col-6</div>
  <div>.g-col-6</div>
</div>

Обертка

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

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

.g-col-6

.g-col-6

.g-col-6

.g-col-6

<div>
  <div>.g-col-6</div>
  <div>.g-col-6</div>
  <div>.g-col-6</div>
  <div>.g-col-6</div>
</div>

Начало

Стартовые классы призваны заменить классы смещения нашей сетки по умолчанию, но они не совсем такие же. CSS-Сетка создает шаблон сетки с помощью стилей, которые говорят браузерам «начинать с этого столбца» и «заканчиваться в этом столбце». Это свойства grid-column-start и grid-column-end. Стартовые классы являются сокращением для первых. Соедините их с классами столбцов, чтобы задать размер и выровнять столбцы, как вам нужно. Начальные классы начинаются с 1, поскольку 0 является недопустимым значением для этих свойств.

.g-col-3 .g-start-2

.g-col-4 . g-start-6

<div>
  <div>.g-col-3 .g-start-2</div>
  <div>.g-col-4 .g-start-6</div>
</div>

Авто колонки

Когда в элементах сетки нет классов (непосредственные дочерние элементы для .grid), размер каждого элемента сетки автоматически будет равен одному столбцу.

1

1

1

1

1

1

1

1

1

1

1

1

<div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

Это поведение можно смешивать с классами столбцов сетки.

.g-col-6

1

1

1

1

1

1

<div>
  <div>.g-col-6</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

Вложенность

Подобно нашей сетке по умолчанию, наша CSS Grid позволяет легко встраивать файлы . grid. Однако, в отличие от значения по умолчанию, эта сетка наследует изменения в строках, столбцах и промежутках. Рассмотрим пример ниже:

• Мы переопределяем количество столбцов по умолчанию с помощью локальной переменной CSS: --bs-columns: 3.
• В первом автоматическом столбце количество столбцов наследуется, и каждый столбец составляет одну треть доступной ширины.
• Во втором автоматическом столбце мы сбросили счетчик столбцов во вложенном .grid на 12 (наше значение по умолчанию).
• В третьем автоколонке нет вложенного содержимого.

На практике это позволяет создавать более сложные и настраиваемые макеты по сравнению с нашей сеткой по умолчанию.

Первая автоколонка

Автоколонка

Автоколонка

Вторая автоколонка

6 of 12

4 of 12

2 of 12

Третья автоколонка

<div>
  <div>
    Первая автоколонка
    <div>
      <div>Автоколонка</div>
      <div>Автоколонка</div>
    </div>
  </div>
  <div>
    Вторая автоколонка
    <div>
      <div>6 of 12</div>
      <div>4 of 12</div>
      <div>2 of 12</div>
    </div>
  </div>
  <div>Третья автоколонка</div>
</div>

Кастомизация

Настройте количество столбцов, количество строк и ширину промежутков с помощью локальных переменных CSS.

Переменная	Резервное значение	Описание
--bs-rows	1	Количество строк в шаблоне сетки
--bs-columns	12	Количество столбцов в шаблоне сетки
--bs-gap	1.5rem	Размер промежутка между столбцами (по вертикали и горизонтали)

Эти переменные CSS не имеют значения по умолчанию; вместо этого они применяют резервные значения, которые используются до тех пор, пока не будет предоставлен локальный экземпляр. Например, мы используем var(--bs-rows, 1) для наших строк CSS Grid, который игнорирует --bs-rows, потому что он еще нигде не установлен. Как только это произойдет, экземпляр .grid

будет использовать это значение вместо резервного значения 1.

Нет классов сетки

Непосредственные дочерние элементы для . grid являются элементами сетки, поэтому их размер будет изменяться без явного добавления класса .g-col.

Автоколонка

Автоколонка

Автоколонка

<div>
  <div>Автоколонка</div>
  <div>Автоколонка</div>
  <div>Автоколонка</div>
</div>

Столбцы и промежутки

Отрегулируйте количество столбцов и промежутков.

.g-col-2

.g-col-2

<div>
  <div>.g-col-2</div>
  <div>.g-col-2</div>
</div>

.g-col-6

.g-col-4

<div>
  <div>.g-col-6</div>
  <div>.g-col-4</div>
</div>

Добавление строк

Добавление дополнительных строк и изменение размещения столбцов:

Автоколонка

Автоколонка

Автоколонка

<div>
  <div>Автоколонка</div>
  <div>Автоколонка</div>
  <div>Автоколонка</div>
</div>

Промежутки

Изменяйте вертикальные промежутки, только изменяя row-gap. Обратите внимание, что мы используем gap в .grid, но row-gap и column-gap можно изменить по мере необходимости.

.g-col-6

.g-col-6

.g-col-6

.g-col-6

<div>
  <div>.g-col-6</div>
  <div>.g-col-6</div>
  <div>.g-col-6</div>
  <div>.g-col-6</div>
</div>

Из-за этого у вас могут быть разные вертикальные и горизонтальные

gap, которые могут принимать одно значение (все стороны) или пару значений (вертикальное и горизонтальное). Это может быть применено со встроенным стилем для gap или с нашей CSS-переменной --bs-gap.

.g-col-6

.g-col-6

.g-col-6

.g-col-6

<div>
  <div>.g-col-6</div>
  <div>.g-col-6</div>
  <div>.g-col-6</div>
  <div>.g-col-6</div>
</div>

Sass

Одним из ограничений CSS Grid является то, что наши классы по умолчанию по-прежнему генерируются двумя переменными Sass: $grid-columns и $grid-gutter-width. Это фактически предопределяет количество классов, сгенерированных в нашем скомпилированном CSS. У вас есть два варианта:

• Измените эти переменные Sass по умолчанию и перекомпилируйте свой CSS.
• Используйте встроенные или настраиваемые стили для расширения предоставленных классов.

Например, вы можете увеличить количество столбцов и изменить размер зазора, а затем изменить размер «столбцов» с помощью сочетания встроенных стилей и предопределенных классов столбцов таблицы CSS (например, .g-col-4).

14 колонок

.g-col-4

<div>
  <div>14 колонок</div>
  <div>.g-col-4</div>
</div>

Bootstrap Бутстрап 4 Large grid

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮ Назад Дальше ❯

---

Пример большой сетки

	Extra small	Small	Medium	Large	Extra Large
Class prefix	. col-	.col-sm-	.col-md-	.col-lg-	.col-xl-
Screen width	<576px	>=576px	>=768px	>=992px	>=1200px

В предыдущей главе мы представили пример Grid с классами для малых и средних устройств. Мы использовали два Div (столбцы), и мы дали им 25% 75% Сплит на небольших устройствах, и 50%% разделить на средние устройства:

<div>….</div>
<div>….</div>

Но на больших устройствах дизайн может быть лучше, как 33%% Сплит.

Большие устройства определяются как имеющие ширину экрана от 992 пикселей до 1199 пикселей.

Для больших устройств мы будем использовать .col-lg-* классы:

<div>….</div>
<div>….</div>

Теперь Bootstrap собирается сказать «на малых размеров, посмотрите на классы с-SM-в них и использовать их. На средних размерах, посмотрите на классы с-MD-в них и использовать их. На больших размерах, посмотрите на классы со словом-LG-в них и использовать эти «.

Следующий пример приведет к 25% 75% Сплит на малых устройствах, 50% 50% Сплит на средних устройствах, и 33%% на 66% Сплит на больших и XLarge устройств. На дополнительных малых устройствах, он будет автоматически стек (100%):

.col-sm-3 .col-md-6 .col-lg-4

.col-sm-9 .col-md-6 .col-lg-8

Пример

<div>
  <div>
    <div>
      <p>Lorem ipsum…</p>
    </div>
    <div>
      <p>Sed ut perspiciatis…</p>
    </div>
  </div>
</div>

Примечание: Убедитесь, что сумма добавляет до 12 или меньше (не обязательно использовать все 12 доступных столбцов):

---

Использование только больших

В приведенном ниже примере мы указываем только .col-lg-6 класс (без . col-md-* и/или .col-sm-* ). Это означает, что большие и XLarge устройства будут разделены на 50%. Однако, для средних, малых и экстренных малых приспособлений, оно будет штабелировать вертикально (100% ширины):

Пример

<div>
  <div>
    <div>
      <p>Lorem ipsum…</p>
    </div>
    <div>
      <p>Sed ut perspiciatis…</p>
    </div>
  </div>
</div>

---

Автоматические столбцы макета

В Bootstrap 4 имеется простой способ создания столбцов с одинаковой шириной для всех устройств: просто удалите номер из .col-lg-* и используйте только .col-lg класс на указанное число элементов Col. Bootstrap будет распознать количество столбцов, и каждый столбец будет иметь одинаковую ширину.

Если размер экрана меньше 992пкс, столбцы будут складываться горизонтально:

<!— Two columns: 50% width on large and up—>
<div>
  <div>1 of 2</div>
  <div>2 of 2</div>
</div>

<!— Four columns: 25% width on large and up —>
<div>
  <div>1 of 4</div>
  <div>2 of 4</div>
  <div>3 of 4</div>
  <div>4 of 4</div>
</div>

1 of 2

2 of 2

1 of 4

2 of 4

3 of 4

4 of 4

❮ Назад Дальше ❯

bootstrap 4 популярное

bootstrap сетка
bootstrap меню
bootstrap modal модальное окно
блоки bootstrap
bootstrap скачать бесплатно
bootstrap кнопки
bootstrap формы
bootstrap таблицы
bootstrap примеры

---

---

Copyright 2018-2020 HTML5CSS. ru

Правила и Условия Политика конфиденциальности О нас Контакты

Bootstrap 4 Примеры сетки

❮ Предыдущая Далее ❯

---

Ниже мы собрали несколько примеров макетов сетки Bootstrap 4.

---

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

Используйте класс .col для указанного количества элементов, и Bootstrap распознает количество элементов (и создаст столбцы одинаковой ширины). В приведенном ниже примере мы используем три элемента col, ширина каждого из которых составляет 33,33%.

цвет

цвет

цвет

Пример

Попробуйте сами »

---

Три равных столбца с использованием чисел

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

col-4

col-4

col-4

Пример

Попробуйте сами »

---

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

Чтобы создать неравные столбцы, вы должны использовать числа. В следующем примере будет создано разделение 25%/50%/25%:

col-3

col-6

col-3

Пример