堆叠

基于我们的 Flexbox 工具的速记辅助工具，使组件布局比以往更快更容易。

本页目录

Stacks 提供了一种捷径，能够应用多种 flexbox 属性，以便在 Bootstrap 中快速轻松地创建布局。所有关于这一概念和实现的荣誉都归功于开源的 Pylon 项目。

注意！ 在 Safari 14.5 之前，flexbox 的间距工具不受支持，因此请考虑确认你计划支持的浏览器。网格布局应该没有问题。了解更多。

垂直

使用 .vstack 创建垂直布局。堆叠的项目默认是全宽的。使用 .gap-* 工具在项目之间添加间距。

第一项

第二项

第三项

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>

水平

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

第一项

第二项

第三项

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 作为间隔：

第一项

第二项

第三项

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>

以及使用垂直分隔线：

第一项

第二项

第三项

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>

示例

使用 .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>

CSS

scss/辅助/_堆栈.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;
}