Добавлено в v5.1 На GitHub

Стеки

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

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

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

Внимание! Поддержка утилит gap с flexbox недоступна в Safari до версии 14.5, поэтому рассмотрите возможность проверки предполагаемой поддержки браузером. Сетка макета не должна иметь проблем. Подробнее.

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

Используйте .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;
}