在 v5.1 中添加在 GitHub 上查看

堆栈

简便快捷的助手，基于我们的 flexbox 实用程序构建，使组件布局比以往任何时候都更快、更轻松。

此页面上

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

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

垂直

使用 .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/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;
}