|
Используйте утилиты гибкой центровки для вертикальной и горизонтальной центровки колонок.
Вертикальное выравнивание
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Горизонтальное выравнивание
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Без пробелов между колонками
Пробелы между колонками в наших предустановленных классах можно удалить с помощью класса .no-gutters, который удаляет отрицательный марждин margin из .row и горизонтальный паддинг padding из всех колонок.
Здесь исходный код для создания этих стилей. Заметим, что переопределения колонок действуют только в первых наследуемых колонках и определяются через селектор атрибута. Этот метод создает более подробный селектор, и паддинг колонки может быть изменен через spacing utilities.
Нужно создать дизайн «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-9
.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-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
.col-6 .col-sm-4
md и выше -->
.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
.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-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
В дополнение к «сбросу» колонок на брейкпойнтах, вам может понадобиться сброс офсетов. Смотрите пример с разметкой.
.col-sm-5 .col-md-6
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
.col.col-sm-6.col-md-5.col-lg-6
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
.col-sm-5 .col-md-6
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
.col.col-sm-6.col-md-5.col-lg-6
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
Do'stlaringiz bilan baham: |
