在 v5.1 中新增在 GitHub 上檢視

堆疊

簡寫輔助工具建立在我們的彈性盒狀公用程式之上，讓元件配置比以往更快、更輕鬆。

在此頁面

堆疊提供了一個捷徑，可套用多個彈性盒狀屬性，以在 Bootstrap 中快速且輕鬆地建立配置。概念和實作的所有功勞都歸功於開源 Pylon 專案。

請注意！彈性盒狀的間距公用程式支援最近已新增至 Safari，因此請考慮驗證您預期的瀏覽器支援。格狀配置應無問題。了解更多。

垂直

使用 .vstack 建立垂直版面配置。預設堆疊的項目為全寬。使用 .gap-* 工具程式在項目之間加入間距。

第一個項目

第二個項目

第三個項目

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-* 工具程式在項目之間加入間距。

第一個項目

第二個項目

第三個項目

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 作為間隔

第一個項目

第二個項目

第三個項目

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>

以及垂直規則

第一個項目

第二個項目

第三個項目

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;
}