BS5 Stacks 堆叠布局
学习使用 Stacks 工具快速创建垂直或水平布局，无需额外 CSS。 · 难度：入门 · +15XP
Stacks 简介
Stacks 是 Bootstrap 5 引入的布局工具，类似于 Flexbox，但更简洁。它提供 .vstack（垂直堆叠）和 .hstack（水平堆叠）两个类。
核心类
| 类名 | 说明 |
|---|---|
.vstack | 垂直排列子元素 |
.hstack | 水平排列子元素 |
.gap-* | 控制间距（如 gap-3） |
代码示例
<div class='vstack gap-2'>
<div class='p-2 bg-light'>项目1</div>
<div class='p-2 bg-light'>项目2</div>
</div>
<div class='hstack gap-3'>
<div class='p-2 bg-info'>左</div>
<div class='p-2 bg-info'>中</div>
<div class='p-2 bg-info'>右</div>
</div>练习提示
在右侧代码中，将 vstack 改为 hstack，并添加 gap-4 来增加间距。尝试在水平堆叠中使用 .ms-auto 将元素推到右侧。