Added in v5.1
View on GitHub
堆疊（Stacks）
建構在我們的 Flexbox 通用類別之上的捷徑輔助類別，讓元件版面配置比以往更快、更簡單。
本頁內容
堆疊提供了一個捷徑，可以套用多個 Flexbox 屬性，在 Bootstrap 中快速且輕鬆地建立版面配置。這個概念和實作的靈感來自開源專案 Pylon。
請注意！ 在 Safari 14.5 之前的版本中，Flexbox 不支援 gap 通用類別，因此請考慮驗證您預期的瀏覽器支援。格線版面配置應該沒有問題。閱讀更多。
垂直（Vertical）
使用 .vstack 建立垂直版面配置。堆疊項目預設為全寬。使用 .gap-* 通用類別在項目之間新增間距。
First item
Second item
Third item
<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>水平（Horizontal）
使用 .hstack 建立水平版面配置。堆疊項目預設為垂直置中，且只佔用必要的寬度。使用 .gap-* 通用類別在項目之間新增間距。
First item
Second item
Third item
<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>使用水平 margin 通用類別如 .ms-auto 作為間隔器：
First item
Second item
Third item
<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>以及搭配垂直分隔線：
First item
Second item
Third item
<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>範例（Examples）
使用 .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;
}