Added in v5.1 View on GitHub

Stacks

在我们的flexbox实用程序之上构建的快捷助手，使组件布局比以往任何时候都更快、更容易。

On this page

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

Heads up! 最近Safari中添加了对带有flexbox的gap工具集的支持，因此请考虑验证您想要的浏览器支持。网格布局应该没有问题。阅读更多.

垂直型

使用.vstack创建垂直布局。默认情况下，堆叠项目为full-width。使用.gap-*实用程序在项目之间添加空间。

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>

水平型

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

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

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>

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

示例

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