建立在我们的 flexbox 实用程序之上的速记助手，使组件布局比以往更快、更容易。
堆栈提供了一个快捷方式，用于应用许多 flexbox 属性，以便在 Bootstrap 中快速轻松地创建布局。这个概念和实现的所有功劳都归功于开源 Pylon 项目。
小心！14.5 之前的 Safari 浏览器不支持带有 Flexbox 的间隙实用程序，因此请考虑验证您预期的浏览器支持。网格布局应该没有问题。阅读更多。
垂直
用于创建垂直布局。默认情况下，堆叠项目为全角。使用实用程序在项目之间添加空间。.vstack.gap-*
第一项
第二项
第三项
<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-*
第一项
第二项
第三项
<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
第一项
第二项
第三项
<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>并采用垂直规则：
第一项
第二项
第三项
<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
<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
<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系统
.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;
}