添加于 v5.1 在 GitHub 上查看

Stacks(堆叠)

速记助手构建在我们的 flexbox 实用程序之上，使组件布局比以往更快、更容易。

在此页

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

小心！Safari 最近添加了对带有 flexbox 的 gap 实用程序的支持，因此请考虑验证您的预期浏览器支持。网格布局应该没有问题。阅读更多。

垂直的

.vstack用于创建垂直布局。堆叠的项目默认是全宽的。使用.gap-*实用程序在项目之间添加空间。

First item

Second item

Third item

HTML

<div class="vstack gap-3">
  <div class="bg-body-tertiary border">First item</div>
  <div class="bg-body-tertiary border">Second item</div>
  <div class="bg-body-tertiary border">Third item</div>
</div>

水平的

.hstack用于水平布局。堆叠的项目默认垂直居中，并且只占用其必要的宽度。使用.gap-*实用程序在项目之间添加空间。

First item

Second item

Third item

HTML

<div class="hstack gap-3">
  <div class="bg-body-tertiary border">First item</div>
  <div class="bg-body-tertiary border">Second item</div>
  <div class="bg-body-tertiary border">Third item</div>
</div>

使用像.ms-auto垫片这样的水平边距实用程序：

First item

Second item

Third item

HTML

<div class="hstack gap-3">
  <div class="bg-body-tertiary border">First item</div>
  <div class="bg-body-tertiary border ms-auto">Second item</div>
  <div class="bg-body-tertiary border">Third item</div>
</div>

并使用垂直规则：

First item

Second item

Third item

HTML

<div class="hstack gap-3">
  <div class="bg-body-tertiary border">First item</div>
  <div class="bg-body-tertiary border ms-auto">Second item</div>
  <div class="vr"></div>
  <div class="bg-body-tertiary border">Third item</div>
</div>

例子

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

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创建一个内联表单：

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>

Sass

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