Bootstrap 4 обычная сетка или flexbox


Содержание материала:

Как вырваться из сетки из 12 колонок с сеткой flexbox bootstrap 4?

Когда я услышал, что bootstrap 4 собирается использовать flexbox для сетки, я был очень взволнован. Я думал, что это будет развертывать быстрый и полезный размер элемента, который известен для flexbox. Однако кажется, что он просто добавляет некоторые (основные) функциональные возможности в текущую 12-ти севую систему.

Может ли Bootstrap 4 упростить сопоставление ширины столбцов в макете не более 12 см?

Подобно тому, как гибкие ящики могут быть связаны друг с другом просто путем указания горизонтального пространства для разделения с использованием свойств flex-grow элементов, таких как flex-grow , flex-shrink и flex-basis .

Это будет сделано с помощью простого flex:3; на элемент col2. Но все же кажется невозможным в bootstrap 4? Может, я что-то упустил?

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

Столбцы автоматической компоновки: http://codeply.com/go/JbGGN4Ok3A

Кроме того, используя SASS, вы можете изменить количество столбцов сетки, используя переменную $grid-columns . В вашем примере будет работать сетка с 10 единицами. Объедините это с автоматической компоновкой, и вы можете получить:

SASS

HTML

Примечание. Вы также можете использовать переменную $grid-gutter-width для изменения расстояния между столбцами.

Bootstrap 4 Flex

Bootstrap 4 Flex

Используйте классы Flex для управления компоновкой компонентов Bootstrap 4.

Flexbox

Самая большая разница между Bootstrap 3 и Bootstrap 4 заключается в том, что BootStrap 4 теперь использует Flexbox, а не float, для обработки макета.

Модуль компоновки гибких коробок упрощает разработку гибкой адаптивной структуры макета без использования float или позиционирования. Если вы новичок в Flex, вы можете прочитать об этом в нашем CSS Flexbox учебник.

Примечание: Flexbox не поддерживается в IE9 и более ранних версиях.

Если вам нужна поддержка IE8-9, используйте Bootstrap 3. Это наиболее стабильная версия Bootstrap, и она по-прежнему поддерживается командой для критических исправлений и изменений в документации. Тем не менее, новые функции не будут добавлены к нему.

Для создания контейнера Flexbox и преобразования прямых дочерних элементов в элементы Flex используйте d-flex класс:

Пример

Пример

Чтобы создать встроенный контейнер Flexbox, используйте d-inline-flex класс:

Пример

Пример

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

Используется .flex-row для отображения элементов Flex горизонтально (бок о бок). Это значение по умолчанию.

Совет: используйте .flex-row-reverse Выравнивание по горизонтали по правому краю:

Пример

Пример

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

Используется .flex-column для отображения элементов Flex вертикально (поверх друг друга) или для изменения .flex-column-reverse вертикального направления:

Пример

Пример

Выравнивание содержимого

Используйте .justify-content-* классы для изменения выравнивания элементов Flex. Допустимые классы start (по умолчанию). end center between или around :

Пример

Пример

Заливка/равная ширина

Используйте .flex-fill для элементов Flex, чтобы заставить их в равной ширины:

Пример

Пример

Используйте для .flex-grow-1 элемента Flex, чтобы занять оставшуюся часть пространства. В приведенном ниже примере первые два элемента Flex занимают необходимое пространство, в то время как последний элемент занимает оставшуюся часть доступного пространства:

Пример

Пример

Совет: Используйте .flex-shrink-1 на Flex элемент, чтобы сделать его сжатие, если это необходимо.

Order

Изменение визуального порядка конкретных элементов Flex с помощью .order классов. Допустимые классы от 0 до 12, где наименьшее число имеет наивысший приоритет (Order-1 отображается перед порядком-2 и т.д.):


Пример

Пример

Автоматические поля

С легкостью добавляйте автоматические поля в элементы Flex .mr-auto (нажимайте элементы вправо) или с помощью .ml-auto (передвиньте элементы влево):

Пример

Пример

Обернуть

Управление переносом элементов Flex в контейнер Flex с помощью .flex-nowrap (по умолчанию) .flex-wrap или .flex-wrap-reverse .

Нажмите на кнопки ниже, чтобы увидеть разницу между тремя классами, по Чанг в упаковке Flex элементов в примере поле:

Пример

Пример

Выравнивание содержимого

Управление вертикальным выравниванием собранных элементов Flex с помощью .align-content-* классов. Допустимые классы .align-content-start (по умолчанию). .align-content-end .align-content-center .align-content-between .align-content-around и .align-content-stretch .

Примечание: Эти классы не влияют на отдельные строки элементов Flex.

Нажмите на кнопки ниже, чтобы увидеть разницу между пятью классами, изменив вертикальное выравнивание элементов Flex в поле пример:

Example

Пример

Выравнивание элементов

Управление вертикальным выравниванием отдельных строк элементов Flex с помощью .align-items-* классов. Допустимые классы .align-items-start :, .align-items-end , .align-items-center .align-items-baseline и .align-items-stretch (по умолчанию).

Нажмите на кнопки ниже, чтобы увидеть разницу между пятью классами:

Пример

Пример

Выравнивание себя

Управление вертикальным выравниванием заданного элемента Flex с классами .align-self-* . Допустимые классы .align-self-start :, .align-self-end , .align-self-center .align-self-baseline и .align-self-stretch (по умолчанию).

Нажмите на кнопки ниже, чтобы увидеть разницу между пятью классами:

Example

Пример

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

Все классы Flex оснащены дополнительными адаптивными классами, что упрощает задание определенного класса Flex для определенного размера экрана.

* символ может быть заменен SM, MD, LG или XL, который представляет малые, средние, большие или XLarge экраны.

Bootstrap 4. Сетка. Подробное руководство

Всем привет, друзья! В середине 2013 года вышел Bootstrap 3, который за прошедшие годы неплохо зарекомендовал себя как удобный, расширяемый CSS каркас для быстрого создания адаптивных макетов. Миллионы сайтов успешно используют этот фреймворк и мы уже порядком привыкли к нему.

18 января 2020 года случилось важное событие — вышла из беты долгожданная версия Bootstrap 4, основанная на использовании модели Flexbox для разметки, которая в настоящее время уже имеет поддержку всех современных браузеров и является более удобной и гибкой для разработчиков, нежели классическая модель разметки, основанная на Float. Теперь с полной уверенностью можно сказать, что на «Флексах» не можно, а НУЖНО верстать!

Топ-пост этого месяца:  Почему нужна поддержка браузеров устаревших версий разбираем ситуацию с оглядкой на CSS

Дополнительные материалы урока Bootstrap 4

  1. Все примеры урока вы можете потестировать самостоятельно: Скачать архив
  2. Более подробно ознакомиться с документацией Bootstrap 4 вы можете на оф. сайте;
  3. Последний стартер, включающий Bootstrap 4: OptimizedHTML 5.

Сегодня мы подробно разберем работу с сеткой Bootstrap 4, по ходу дела сравнивая её со старой версией. Данный урок будет полезен вам не только если вы новичок и знакомитесь с Bootstrap, но и в том случае, если вы опытный разработчик и хотите изучить все правила и нюансы верстки с использованием сетки Bootstrap 4 и Flexbox инструментов, входящих в её состав.

1. Основные параметры сетки по-умолчанию

По-умолчанию сетка Bootstrap 4 очень похожа на сетку третьей версии, однако появились некоторые важные отличия.

Из таблицы основных опций мы можем заметить явные отличия от сетки третьей версии. Теперь отсутствует префикс класса «.col-xs-», отвечающий за самые маленькие разрешения, вместо него указывается упрощенный префикс «.col-». Можно ошибочно подумать, что префикс «.col-» отвечает за минимальные разрешения мобильных устройств, однако это не совсем так. Помимо всего прочего, префикс «.col-» — это одно из важнейших новшеств Bootstrap 4. Это класс, который отвечает за автоматическую разметку колонок на любом разрешении. Но об этом позже.

За малые разрешения (small) отвечает префикс «.col-sm-» с медиа-запросом от 576 пикс. Ширина контейнера составляет 540 пикс. Средние разрешения отрабатываются от 768 пикс. Ширина контейнера — 720 пикс. Большие разрешения работают с разрешения устройств от 992 пикс. Ширина контейнера — 960 пикс. И самые большие — от 1200 пикс. Ширина контейнера фиксируется на значении 1140 пикс.

Обратите внимание, что максимальные значения медиа-запросов имеют неточные значения с дробной частью «.98» в пикселях. Это заметно при выборе Desktop First метода верстки, где максимальная ширина медиа-запроса ограничена. Например, при компиляции Sass «+media-breakpoint-down(lg)» мы получим «@media (max-width: 1199.98px)». Здесь 0.02 пикселя освобождаются для старта следующего медиа-запроса. Имейте это ввиду. В следующих выпусках «Джедай верстки 8» мы рассмотрим этот и множество других моментов из этого урока на реальном примере.

2. Автоматическая разметка колонок

2.1 Колонки одинаковой ширины

С помощью нового универсального класса «.col» можно указать до 12 колонок в ряду (родитель «.row»), ширина которых будет автоматически вычислена в зависимости от количества элементов и будет равна.


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

Вы также можете явно установить ширину одной колонки, а остальные оставить автоматическими.

В данном примере второй элемент в третьем ряду имеет класс «.col-6» и второй элемент во втором ряду имеет класс «.col-5», которые занимают соответствующее количество колонок на всех разрешениях экрана. Ширина остальных колонок является отзывчивой и вычисляется автоматически, занимая всё оставшееся пространство.

2.3 Контент переменной ширины

Можно использовать класс «col--auto», чтобы определить контент с переменной шириной, в зависимости от занимаемого пространства содержимым колонки. Где breakpoint — размер экрана (xl, lg, md или sm).

Здесь мы видим, что две центральные колонки занимают ширину, соответствующую ширине содержимого, однако в первом ряду благодаря классу «.justify-content-sm-center» у «.row» весь ряд центрируется и общая ширина зависит только от ширины центральной колонки, в то время, как второй ряд растягивается на всю доступную ширину, но вторая колонка остается фиксированной по ширине содержимого.

2.4 Мульти-ряд

Благодаря Bootstrap 4 вы можете сделать в одном ряду несколько строк (переносов). Реализовать это можно с помощью класса «.w-100», который очень похож на тег «br» и по-сути просто делает перенос колонок на новую строку.

Обратите внимание, что данный класс является частью дополнительных возможностей Bootstrap 4, которые подключаются к проекту отдельно в случае использования Sass версии проекта Bootstrap и находятся в папке «scss/utilities». Вы также можете подключить другие плагины из этой папки к вашему проекту по необходимости.

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

3.1 Брейкпоинты

Очень интересная возможность Bootstrap 4 — возможность задавать универсальные колонки, которые будут отображаться на всех разрешениях. Это упомянутый ранее класс «.col». Кроме того, можно определить класс, указывающий конкретное количество колонок, занимаемое содержимым — это классы с префиксом «.col-<число колонок>», например «.col-6» говорит нам о том, что содержимое займёт 6 колонок из 12. В случае, когда конкретное количество задавать не обязательно, можно смело использовать универсальный класс «.col».

3.2 На мобильных устройствах

Вы можете использовать префикс класса «.col-sm-<количество занимаемых колонок>» для того, чтобы задать базовую сетку на всех разрешениях, кроме самых маленьких. На небольших экранах колонки такой сетки будут складываться друг под друга. На разрешениях больше — будут занимать столько места, сколько вы определили в классах.

Здесь мы видим, что первый ряд на устройствах с разрешением более «sm», то-есть больше, чем 576 пикс. разбивается на 2 колонки — шириной 8 и 4 из 12-ти соответственно. Ширина колонок во втором ряду вычисляется автоматически, но на самых малых разрешениях эти колонки также складываются друг под друга, благодаря классу «.col-sm».

3.3 Создание сложной комбинированной сетки

С помощью Bootstrap вы можете создавать любые комбинации колонок при создании сетки. Для каждой колонки можно задать любое поведение на различных разрешениях с помощью адаптивных классов. Здесь отличия от третьей версии — только в наименованиях классов.

4. Выравнивание

Bootstrap 4 основан на «флексах» и дарит нам все возможности данной модели, которые доступны в простых готовых классах. В числе возможностей — вертикальное и горизонтальное выравнивание.

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

Помимо управления выравниванием через родительский «.row», можно выравнивать колонки, задавая им соответствующие классы:

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

Кроме того, Bootstrap 4 имеет в своём арсенале инструменты для горизонтального выравнивания колонок при помощи префикса «.justify-content-» у «.row».

4.3 Удаление полей между колонками

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

Для этого достаточно у элемента «.row» задать дополнительный класс «.no-gutters».

4.4 Перенос колонок на новую строку

Если ряд (.row) заполняется суммарным количеством колонок более 12-ти, последующая колонка переносится на новую строку.

Здесь всё также, как в 3-й версии Bootstrap.

5. Порядок элементов

5.1 Классы порядка элементов

Можно использовать специальные классы с префиксом «.order-» для определения порядка элементов. Если вы знакомы с Flex-вёрсткой, данные правила будут вам знакомы. Bootstrap 4 даёт возможность задавать порядок элементов с помощью классов. Можно задавать порядок напрямую (.order-1.order-md-2):

Или можно использовать специальные классы, которые определяют порядок первого и последнего элементов (.order-first, .order-last):

5.2 Смещение колонок

По аналогии с Bootstrap 3, в 4-й версии также есть возможность горизонтального смещения колонок, однако реализовано это несколько иначе и для этого есть специальные классы с префиксом «.offset-».

Топ-пост этого месяца:  Политика конфиденциальности

5.2.1 Классы смещения

Сдвигать колонку вправо можно, используя классы «.offset-md-*», которые увеличивают левый отступ на * количество элементов. Из примера ниже, класс «.offset-md-2» сдвинет колонку «.col-md-4» на 2 колонки вправо, остальные примеры работают по аналогии:

Можно сбрасывать отступ на всех разрешениях благодаря классу «.offset-*-0», где * — это sm, md, lg или xl.

6. Вложенность

Весьма ожидаемо, что Bootstrap 4 поддерживает вложенность элементов. Работает здесь всё также, как в третьей версии — чтобы вложить колонки в другие, необходимо создать дочерний класс «.row» и уже в него вкладывать колонки.

Мы рассмотрели основные особенности работы с сеткой Bootstrap 4. Если у вас есть желание более подробно ознакомиться со всеми возможностями фреймворка, рекомендую изучить документацию на официальном сайте.

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

Премиум уроки от WebDesign Master

Создание контентного сайта на Jekyll от А до Я

Создание современного интернет-магазина от А до Я

Я — фрилансер! — Руководство успешного фрилансера

Сетка Bootstrap 4

Сетка Bootstrap 4 — это, пожалуй, самое «вкусное» в этом фреймворке, т.к. именно из-за сетки с ее адаптивными возможностями Bootstrap стал самой популярной системой для верстки. И, если в 3-й версии Bootstrap колонки с точки зрения css базировались на свойстве float: left, то в 4-ой версии основой разбиения блока на колонки стала модель Flexbox.


Классы-контейнеры

Но начнем мы не с самой сетки, а с классов-контейнеров, в которые обычно помещаются колонки. Как и в BS3, эти классы имеют название .container и .container-fluid . Общее в правилах для этих классов — это отступы слева и справа в 15px ( padding-left: 15px и padding-right: 15px ). Отличаются же они тем, что класс .container-fluid имеет ширину в 100% и занимает все доступное пространство по ширине окна браузера, причем при любом разрешении экрана, а класс .container имеет для разных разрешений фиксированную ширину, представленную в таблице:

Extra small
.col-
.col-sm- .col-md- .col-lg- .col-xl-
Число колонок 12
Ширина отступа 30px (15px с каждой стороны столбца)
Может быть вложенным Да
Упорядочивание колонок Да

Стили контейнеров

Размещение колонок

Все колонки, которые вы хотите разместить в одном ряду, следует в обязательном порядке размещать в div с классом .row , т.к. именно этот класс имеет свойство display: flex .

Чтобы создать несколько колонок одинаковой ширины, достаточно назначить элементу div класс .col . Вы не увидите особых изменений и перестраивания колонок при уменьшении экрана. Основными правилами для этого класса являются:

Поэтому только при значительном уменьшении экрана колонки перестраиваются.

Колонки для всех устройств

Также можно использовать классы, которые делят пространство контейнера на равные части, исходя из 12 колонок в нем. Например, 3 колонки с классами .col-4 или 2 колонки с классами .col-6 , или 6 колонок с классами .col-2 и т.п. Также можно использовать эти классы в другом сочетании, например, класс .col-9 и класс .col-3 . Минусом этого варианта построения сетки является то, что колонки остаются колонками при любом разрешении экрана и не перестраиваются в одну даже на смартфонах. Поэтому в таблице выше этот класс указан для создания колонок для extra-small (очень маленьких) устройств.

Стили классов .col-* будут выглядеть примерно так:

Изменяться будут только значения свойств flex-basis (последняя цифра свойства flex ) и max-width в зависимости от цифры (чем меньше цифра, тем больше значения свойств).

В основе примера ниже лежит следующая разметка:

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

Классы адаптивной сетки

И, наконец, мы добрались до классов, которые перестаиваются в зависимости от разрешения экрана. Собственно, они уже были представлены в таблице. Все классы начинаются со слова col (от англ. column — столбец или колонка) и префикса -xl-, -lg-, -md-, -sm- , после которого идет цифра. Цифра получается путем деления 12 (максимальное количество столбцов в сетке Bootstrap) на нужное вам количество колонок. Например, для 2-х колонок равной ширины вам понадобятся классы с цифрой 6 в конце (12:2=6), для 3-х колонок — классы с цифрой 4 (12:3=4), для 4-х колонок — классы с цифрой 3 (12:4=3), для 6-и колонок — классы с цифрой 2 (12:6=2).

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

Рассмотрим их применение для 3-хколоночного макета. Нам понадобится 3 колонки с классами .col-xl-4 , .col-lg-4 , .col-md-4 и .col-sm-4 . Если уменьшать размер экрана, то все колонки будут перестраиваться в одну. Вот только произойдет это на разных разрешениях. Позже всех перестроятся в один столбец div-ы с классами .col-sm-4 .

Вы можете посмотреть на внешний вид колонок в отдельном файле, изменяя размер окна браузера или с помощью Device Toolbar в инспекторе свойств браузера Chrome или Firefox.

Если вы хотите разделить внутреннее пространство одной из колонок на части, вам нужно также исходить из того, что ширина родительского элемента для дочерних делится на 12 колонок. Соответственно, вы формируете классы, исходя из того, сколько колонок вам нужно: если 2, то используете классы col-6 , если 3, то классы col-4 и т.п., помещаете их внутри класса row , но при этом блок .row колонок находится внутри родительского элемента.

Bootstrap 4 Flexbox

Bootstrap наконец-то начал поддерживать flexbox.
Flexbox будет задействован для следующих компонентов:

  • вся система сеток (миксины и предопределенные классы), которые перейдут с float на display: flex;
  • формы ввода display: table; сменит display: flex;
  • медиа компоненты перейдут display: table;

Браузерные префиксы проставлены с помощью плагина Autoprefixer для Grunt.

Почему Flexbox?

В двух словах, flexbox предлагает более простые и гибкие варианты создания сеток:

  • простое вертикальное выравнивание контента внутри родительского элемента;
  • простое управление контентом для различных разрешений с помощью медиа запросов;
  • простое управление высотой колонок в системе сеток;

Всё это можно осуществить и без flexbox, но часто на это требуется потратить много усилий.

Пример сетки с Flexbox

Как начать работать с Flexbox

Если вы знакомы с препроцессорами (Sass, Less и др.), то начать работать с flexbox в Bootstrap 4 для вас не составит труда.

      1. Откройте файл _variables.scss, найдите переменную $enable-flex
      2. Поменяйте ее значение с false на true
      3. Скомпилируйте CSS файл заново и готово!

Кроме того, вы можете скачать готовый CSS файл с предустановленным flexbox.

Поддержка браузеров

Включение flexbox означает уменьшение поддержки браузерами и устройствами:

  • Internet Explorer 9 и ниже не поддерживают flexbox;
  • Internet Explorer 10 имеет несколько известных причуд: требует использования префикса, и поддерживает только синтаксис из старой версии спецификации 2012 года;

Будьте осторожны при использовании bootstrap 4 flexbox в ваших проектах, ориентируйтесь на вашу аудиторию, пользуетесь сайтом CanIUse, чтобы уточнить поддержку браузерами.

Подскажите что лучше изучать CSS Gr > Задать вопрос

Подскажите что лучше изучать CSS Grid, bootstrap или flexbox что более удобнее для пользования , и что более лучше для создания сайтов

2 ответа 2

Стоит сразу отметить,что Flexbox и CSS Grid — это специальные модули CSS. А Bootstrap — фреймворк, который в основном используется для адаптация к мобильным устройствам. На начальном этапе вам необходимо достаточно хорошо разобраться с HTML и CSS. В дальнейшем стандартно рекомендуется начать с изучения фреймворка Bootstrap. Затем освоить другие фреймворки. После чего Вы сможете подобрать необходимый фреймворк, который будет наиболее удобен для вас и для конкретных целей. Так же у Вас появятся свои готовые решения на базе освоенного материала и полученного опыта. Если просто ответит на Ваш вопрос порядок следующий:

  1. HTML
  2. CSS в общем
  3. Flexbox
  4. CSS Grid
  5. Bootstrap
  6. Другие фреймворки.

CSS Grid, Flexbox, Bootstrap друг друга не заменяют, у них разное назначение, хотя некоторые элементы можно сделать сразу на нескольких из них.


Я рекомендую для начала поверхностно изучить понять что каждая из этих технологий делает. А потом можно будет изучать более подробно сами технологии.

Последовательность предлагаю такую.

  1. Flexbox (на первом месте, так как сейчас он реально много где используется, и многие вещи без него не сделать, очень удобен).
  2. CSS Grid
  3. Bootstrap (на последнем месте так как первые два это модули CSS, то есть основа, а Bootstrap это Framework).

Теперь кратко что делает каждая из технологий.

  1. Flexbox — контейнер для последовательности элементов, списков (таблицы на нём обычно не делают).
  2. CSS Grid — позволяет делать шаблоны (layout) страницы табличным методом, современная и мощная технология.
  3. Bootstrap — фреймворк для создания адаптивных страниц корректно и красиво отображающихся на устройствах с разным размером экрана: мобильники, планшеты, ПК. Так же имеет в себе много (библиотека) различных компонентов страницы.

Макет кладки Bootstrap 4 с использованием сетки flexbox

Есть ли способ создать макет столбца кладки с использованием сетки flexbox, которой оснащен Bootstrap 4? Мне кажется, что все столбцы имеют одинаковую высоту.

1 ответ

Это в значительной степени выполнимо со стандартными классами Bootstrap 4. В документации есть даже целый раздел, посвященный функции столбцы карт . .

Из документов:
Карты могут быть организованы в масонские -подобные столбцы, содержащие только CSS, поместив их в .card-columns . Карты создаются со свойствами столбца CSS вместо flexbox для более удобного выравнивания. Карты располагаются сверху вниз и слева направо.

Направляйся! Ваш пробег с колонками карт может отличаться. Чтобы карты не разбивались по столбцам, мы должны установить для них display: inline-block как column-break-inside: avoid еще не является пуленепробиваемым решением.

Итак, все, что вам нужно сделать, это обернуть ваши .card в .card-columns вот так:

Bootstrap 4: обычная сетка или flexbox

14654 просмотра

1 ответ

345 Репутация автора

Есть ли способ создать макет колонны кладки, используя сетку flexbox, которой оснащен Bootstrap 4? Мне кажется, что все столбцы имеют одинаковую высоту.

Ответы (1)

24 плюса

5186 Репутация автора

Это в значительной степени выполнимо со стандартными классами Bootstrap 4. В документации есть даже целый раздел, посвященный функции столбцов карт .

Из документов:
Карты могут быть организованы в Masonry- подобные столбцы только с помощью CSS, оборачивая их .card-columns . Карты построены со CSS свойствами столбцов вместо flexbox для более удобного выравнивания. Карты упорядочены сверху вниз и слева направо.

Берегись! Ваш пробег с колонками карт может отличаться. Чтобы предотвратить попадание карточек в столбцы, мы должны установить их display: inline-block как column-break-inside: avoid пуленепробиваемое решение.

Итак, все, что вам нужно сделать, это обернуть ваши .card s в .card-columns контейнер следующим образом:

бутстрап 4 сетки неровных столбцов

2 adam [2020-10-05 17:48:00]

Я использую bootstrap 4 grid. У меня 3 столбца. я хочу, чтобы первая и третья колонки были col-8, а второй столбец был col-4. в основном второй столбец — это боковая панель, которую я хочу упасть между первым и третьим столбцом на маленьких экранах. к сожалению, мой второй столбец имеет динамическую высоту и очень длинный, поэтому первому столбцу присваивается высота второго столбца, оставляя третий столбец начинающим со дна второго столбца с большим количеством пробелов между первым и третьим. я хотел бы, чтобы столбец 3 попал прямо под текстом первого столбца.

Я надеюсь, что в этом есть смысл.

Это образ того, что я пытаюсь сделать:

css flexbox twitter-bootstrap bootstrap-4

4 ответа

2 Решение Zim [2020-10-08 21:16:00]

В основном об этом уже был дан ответ.

Bootstrap 4 — это flexbox, и поэтому все столбцы становятся такой же самой высотой, как и самый высокий столбец. Обычно вы можете обходить это, вставляя столбцы, но тогда вы не получите желаемый порядок столбцов. Обходным путем является использование таких поплавков:

Это работает с использованием d-sm-block в row для display:block строки display:block вместо display:flex on sm и up. Это позволяет float-* работать с колонками, а второй столб находится вправо.

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

Bootstrap 4 прекращает поддержку IE9 и полностью переходит на Flexbox

Bootstrap 4 теперь по умолчанию использует Flexbox. Других изменений во взаимодействии с CSS, кроме связанных с Flexbox, практически не произошло.

  • Удалена переменная $enable-flex . Flexbox теперь включен по умолчанию и не может быть отключен через Sass-переменную.
  • Для карт, сетки, медиа-объектов, списков и компонентов навигации удалены non-flexbox варианты.
    • Особых изменений в системе слоев это не вызвало, но зато теперь можно пользоваться автовыравниванием flexbox.
    • Что касается карт, то теперь .card-deck-wrapper можно удалить.
    • Теперь не обязательно иметь строгий порядок разметки при использовании медиа-объектов ( .media-left и .media-right не обязательно должны идти первыми в DOM).
    • Упрощено выравнивание бейджев.
  • Практически вся документация по сетке объединена в единый файл grid.md .
  • Для упрощения поддержки IE10+ была обновлена документация по миграции и браузерам.
  • Удалены компилируемые flexbox-бандлы.
  • Файл документации flexbox.md был удален из секции “Getting started”.

Какие изменения коснулись CSS:

  • Из строк был удален Clearfix.
  • Теперь колонки используют max-width вместо width .

Чтобы не пропустить важные обновления, рекомендуем вам следить за страницей Bootstrap на GitHub.

Топ-пост этого месяца:  Google опубликовал очередной ролик из серии # AskGoogleWebmasters
Добавить комментарий