Stacks 提供了一种捷径，能够应用多种 flexbox 属性，以便在 Bootstrap 中快速轻松地创建布局。所有关于这一概念和实现的荣誉都归功于开源的 Pylon 项目。
垂直
使用 .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>响应式
考虑在窄屏移动设备上堆叠按钮，并在较大设备上将它们水平排列的示例。
<div class="vstack gap-2 md:col-5 mx-auto">
<button type="button" class="btn-solid theme-primary">Save changes</button>
<button type="button" class="btn-outline theme-secondary">Cancel</button>
</div>这是如何使用响应式堆栈来实现的，这些堆栈基于容器媒体查询。将堆栈包裹在额外的元素中，或者在现有父元素中添加.stack-container，以为堆栈提供一个“容器”，从而使其布局能够自适应。
<div class="stack-container">
<div class="vstack gap-2 sm:hstack">
<button type="button" class="btn-solid theme-primary">Save changes</button>
<button type="button" class="btn-outline theme-secondary">Cancel</button>
</div>
</div>CSS
.stack-container {
@include set-container();
}
[class*="hstack"],
[class*="vstack"] {
display: flex;
flex: var(--stack-flex, 1 1 auto);
flex-direction: var(--stack-direction, row);
align-items: var(--stack-align-items, center);
align-self: var(--stack-align-self, stretch);
}
@include loop-breakpoints-up() using ($breakpoint, $prefix) {
.#{$prefix}vstack {
@include container-breakpoint-up($breakpoint) {
--stack-direction: column;
--stack-align-items: stretch;
}
}
.#{$prefix}hstack {
@include container-breakpoint-up($breakpoint) {
--stack-direction: row;
--stack-align-items: flex-start;
}
}
}