Added in v5.1

堆栈

速记助手构建在我们的 Flexbox 工具之上，使组件布局比以往更快、更容易。

Stacks 提供了应用多个 Flexbox 属性的快捷方式，以便在 Bootstrap 中快速轻松地创建布局。该概念和实现的所有功劳都归功于开源塔架项目。

¥Stacks offer a shortcut for applying a number of flexbox properties to quickly and easily create layouts in Bootstrap. All credit for the concept and implementation goes to the open source Pylon project.

Heads up! Support for gap utilities with flexbox was recently added to Safari, so consider verifying your intended browser support. Grid layout should have no issues. Read more.

垂直的

¥Vertical

使用 .vstack 创建垂直布局。默认情况下，堆叠的项目是全角的。使用 .gap-* 工具在项目之间添加空间。

¥Use .vstack to create vertical layouts. Stacked items are full-width by default. Use .gap-* utilities to add space between items.

First item

Second item

Third item

html

<div class="vstack gap-3">
  <div class="p-2">First item</div>
  <div class="p-2">Second item</div>
  <div class="p-2">Third item</div>
</div>

水平的

¥Horizontal

使用 .hstack 进行水平布局。默认情况下，堆叠的项目垂直居中，并且仅占据其必要的宽度。使用 .gap-* 工具在项目之间添加空间。

¥Use .hstack for horizontal layouts. Stacked items are vertically centered by default and only take up their necessary width. Use .gap-* utilities to add space between items.

First item

Second item

Third item

html

<div class="hstack gap-3">
  <div class="p-2">First item</div>
  <div class="p-2">Second item</div>
  <div class="p-2">Third item</div>
</div>

使用水平边距工具（如 .ms-auto）作为间隔符：

¥Using horizontal margin utilities like .ms-auto as spacers:

First item

Second item

Third item

html

<div class="hstack gap-3">
  <div class="p-2">First item</div>
  <div class="p-2 ms-auto">Second item</div>
  <div class="p-2">Third item</div>
</div>

并使用垂直规则：

¥And with vertical rules:

First item

Second item

Third item

html

<div class="hstack gap-3">
  <div class="p-2">First item</div>
  <div class="p-2 ms-auto">Second item</div>
  <div class="vr"></div>
  <div class="p-2">Third item</div>
</div>

示例

¥Examples

使用 .vstack 堆叠按钮和其他元素：

¥Use .vstack to stack buttons and other elements:

html

<div class="vstack gap-2 col-md-5 mx-auto">
  <button type="button" class="btn btn-secondary">Save changes</button>
  <button type="button" class="btn btn-outline-secondary">Cancel</button>
</div>

使用 .hstack 创建内联表单：

¥Create an inline form with .hstack:

html

<div class="hstack gap-3">
  <input class="form-control me-auto" type="text" placeholder="Add your item here..." aria-label="Add your item here...">
  <button type="button" class="btn btn-secondary">Submit</button>
  <div class="vr"></div>
  <button type="button" class="btn btn-outline-danger">Reset</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;
}