堆叠

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

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

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

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

第一项
第二项
第三项
<div class="vstack gap-3">
        <div class="bg-light border">第一项</div>
        <div class="bg-light border">第二项</div>
        <div class="bg-light border">第三项</div>
      </div>
水平的

使用 .hstack 进行水平布局。 默认情况下,堆叠的项目垂直居中,并且只占用它们必要的宽度。 使用 .gap-* 实用程序在项目之间添加空间。

第一项
第二项
第三项
<div class="hstack gap-3">
        <div class="bg-light border">第一项</div>
        <div class="bg-light border">第二项</div>
        <div class="bg-light border">第三项</div>
      </div>

使用 .ms-auto 等水平边距实用程序作为分隔符:

第一项
第二项
第三项
<div class="hstack gap-3">
        <div class="bg-light border">第一项</div>
        <div class="bg-light border ms-auto">第二项</div>
        <div class="bg-light border">第三项</div>
      </div>

并使用垂直规则:

第一项
第二项
第三项
<div class="hstack gap-3">
        <div class="bg-light border">第一项</div>
        <div class="bg-light border ms-auto">第二项</div>
        <div class="vr"></div>
        <div class="bg-light border">第三项</div>
      </div>
示例

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

<div class="vstack gap-2 col-md-5 mx-auto">
        <button type="button" class="btn btn-secondary">保存更改</button>
        <button type="button" class="btn btn-outline-secondary">取消</button>
      </div>

使用 .hstack 创建一个内联表单:

<div class="hstack gap-3">
        <input class="form-control me-auto" type="text" placeholder="在此处添加您的项目..." aria-label="在此处添加您的项目...">
        <button type="button" class="btn btn-secondary">提交</button>
        <div class="vr"></div>
        <button type="button" class="btn btn-outline-danger">重置</button>
      </div>