bootstrap выравнивание блока по центру

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

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

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

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

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

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

  • Инструмент для центровки контента сайта. Используйте класс .container для фиксированной ширины или .container-fluid для 100%-ной ширины.
  • Ряды – это обертка для колонок. Каждая колонка имеет горизонтальный padding (называемый gutter) для контроля пространства между колонками. Этот padding (паддинг) влияет на ряды с отрицательным марджином. В этом случае все содержимое ваших колонок будет визуально центрировано внизу с левой стороны.
  • Содержимое должно быть расположено в колонках, и только колонки могут быть расположены в рядах.
  • Благодаря флексбоксу колонки сетки без установленного атрибута «ширина» автоматически получают равную ширину. Например, четыре экземпляра класса .col-sm автоматически (на малых контрольных точках) получат ширину одной колонки = 25%. Подробнее смотрите раздел Автоматическое расположение с помощью колонок.
  • Цифры в наименовании классов колонок показывают, сколько колонок из 12-ти возможных в ряду вы бы хотели использовать. Так, если вы хотите использовать три колонки одной ширины, используйте .col-sm-4 .
  • Ширина колонок width задана в процентах, что позволяет колонкам быть гибкими и изменять размер относительно их родительского элемента.
  • Колонки имеют горизонтальный паддинг padding для создания отступов между отдельными колонками, но вы можете удалить марджины margin из рядов и паддинги padding из колонок, добавив класс .no-gutters в .row .
  • Есть 5 «ярусов» сеток, по одному для каждого «брейкпойнта»: все контрольные точки (экстра маленький), маленький, средний, большой и экстрабольшой.
  • Ярусы сетки основаны на минимальной широте, т.е. они подходят для каждого вышестоящего яруса (т.е., .col-sm-4 подходит для маленьких, средних, больших и XL девайсов).
  • Вы можете использовать предопределенные классы сетки (например .col-4 ) или препроцессоры Sass для создания своей разметки.

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

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

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


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

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

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

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

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

Имеется вот такой контейнер. Как выровнять его содержимое по центру?

В bootstrap есть тег center-top . Я его пробовал по разному применять, но нужного результата он мне не дал. Код ниже.

2 ответа 2

В бутстрапе есть класс .center-block , который превращает элемент в блок и выравнивает его по центру контейнера. Нужно использовать именно его, а не .center-top или .centered-top .

Чтобы этот класс выровнял блоки по центру ячеек, нужно применить его к самим блокам, а из .top-cover удалить margin-right: 10px; .

Но строки кода и без того чересчур длинные и однообразные. А по сути .center-block добавляет к блокам margin-left: auto; margin-right: auto; . Поэтому можно задать эти свойства стилям .top-cover и .top-name , которые вы уже используете, и обойтись без .center-block . А к .top-name добавить ещё и text-align: center; .

Кроме того, col-lg-2 col-md-3 col-sm-3 col-xs-6 — это то же самое, что и col-lg-2 col-sm-3 col-xs-6 . Заменил для красоты на col-lg-2 col-md-3 col-sm-4 col-xs-6 . Теперь при разной ширине экрана получается две, три, четыре или шесть колонок.

При работе с bootstrap 3 я использую позиционирование сеткой (таблицей), об этом в начале статьи.

А в bootstrap 4 используется новый режим flexbox, но основные приёмы работы с сеткой остались с небольшими изменениями об этом в середине статьи.

Код скрина выше выглядит следующим образом:

DESIGN

REENGINEERING

SUPPORT

INSTRUMENTS

  • Класс row задает расположение блоков в виде одной строки;
  • Строка в bootstrap содержит максимум 12 столбцов;
  • Класс col-ml-4 задает столбец строки, где
    • col(column) — столбец строки;
    • md — идентификатор устройства, bootstrap разделил все устройства на 4 группы в зависимости от ширины экрана;
    • 4 — количество условных единиц(столбцов) ширины будет занимать блок, из 12. То есть div с классом col-ml-4 займет 1/3 ширины экрана устройства шириной от 992 пикселей;

Типы классов устройств

  1. col-xs-*: для устройств с шириной экрана меньше 768 пикселей;
  2. col-sm-*: для устройств с шириной экрана от 768 пикселей и выше;
  3. col-md-*: для устройств с шириной экрана от 992 пикселя и выше;
  4. col-lg-*: для устройств с шириной экрана от 1200 пикселей и выше;

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

Так же как видно из кода я использовал разные значения столбцов для разных устройств — главное что бы в общем было 12 единиц. Мы можем задавать любую другую ширину для каждого устройства:

Классы col-md(sm|lg)-offset-* задают смещение относительно левого блока или начала строки в условных единицах

Левый блок / h2 >

Правый блок / h2 >

Класс col-md-offset-4 будет смещать правый блок на 4 условных единицы вправо:

Некоторые примеры по использованию смещения:

Порядок столбцов

С помощью классов col-md(sm|lg)-push-* и col-md(sm|lg)-pull-* мы можем переопределить порядок блоков в строке. Например, класс col-md-push-4 сдвигает блок на четыре единицы вправо от текущего положения. И наоборот, класс col-md-pull-4 сдвигает блок влево от текущей позиции. Так, предыдущий пример со смещением мы могли бы переписать таким способом:

Оцените статью