Added in v5.1

堆栈

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

Stacks 提供了一种快捷方式，可以应用多种 Flexbox 属性，从而在 Bootstrap 中快速轻松地创建布局。所有关于这一概念和实现的功劳都归开源的 Pylon 项目所有。

🌐 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.

注意！ 在 Safari 14.5 之前，flexbox 的 gap 功能不受支持，因此建议确认你的目标浏览器支持情况。Grid 布局应该没有问题。阅读更多。

垂直的

🌐 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;
}