Добавлено в v5.1 Просмотреть на GitHub

Стеки

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

На этой странице

Стеки предлагают сокращенный способ применения ряда свойств flexbox для быстрого и легкого создания макетов в Bootstrap. Все заслуги за концепцию и реализацию принадлежат открытому проекту Pylon.

Обратите внимание! Поддержка утилит gap с flexbox недоступна в Safari до версии 14.5, поэтому рассмотрите возможность проверки поддержки ваших целевых браузеров. Макет Grid не должен иметь проблем. Подробнее.

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

Используйте .vstack для создания вертикальных макетов. Сложенные элементы по умолчанию занимают всю ширину. Используйте утилиты .gap-* для добавления пространства между элементами.

Первый элемент

Второй элемент

Третий элемент

html

<div class="vstack gap-3">
  <div class="p-2">Первый элемент</div>
  <div class="p-2">Второй элемент</div>
  <div class="p-2">Третий элемент</div>
</div>

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

Используйте .hstack для горизонтальных макетов. Сложенные элементы по умолчанию выровнены по центру по вертикали и занимают только необходимую им ширину. Используйте утилиты .gap-* для добавления пространства между элементами.

Первый элемент

Второй элемент

Третий элемент

html

<div class="hstack gap-3">
  <div class="p-2">Первый элемент</div>
  <div class="p-2">Второй элемент</div>
  <div class="p-2">Третий элемент</div>
</div>

Использование утилит горизонтальных отступов, таких как .ms-auto, в качестве разделителей:

Первый элемент

Второй элемент

Третий элемент

html

<div class="hstack gap-3">
  <div class="p-2">Первый элемент</div>
  <div class="p-2 ms-auto">Второй элемент</div>
  <div class="p-2">Третий элемент</div>
</div>

И с вертикальными линиями:

Первый элемент

Второй элемент

Третий элемент

html

<div class="hstack gap-3">
  <div class="p-2">Первый элемент</div>
  <div class="p-2 ms-auto">Второй элемент</div>
  <div class="vr"></div>
  <div class="p-2">Третий элемент</div>
</div>

Примеры

Используйте .vstack для сложения кнопок и других элементов:

html

<div class="vstack gap-2 col-md-5 mx-auto">
  <button type="button" class="btn btn-secondary">Сохранить изменения</button>
  <button type="button" class="btn btn-outline-secondary">Отмена</button>
</div>

Создайте строчную форму с помощью .hstack:

html

<div class="hstack gap-3">
  <input class="form-control me-auto" type="text" placeholder="Добавьте свой элемент сюда..." aria-label="Добавьте свой элемент сюда...">
  <button type="button" class="btn btn-secondary">Отправить</button>
  <div class="vr"></div>
  <button type="button" class="btn btn-outline-danger">Сбросить</button>
</div>

CSS

scss/helpers/_stacks.scss

.hstack {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
}

.vstack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-self: stretch;
}