View on GitHub

堆疊 (Stacks)

建立在 flexbox 通用類別上的工具，使元件佈局比以前更快、更容易。

六角學院的 Bootstrap 5 課程上線囉，立即與萬人一同學習最專業、最深入的 Bootstrap 5 課程。

立即上課去

On this page

Stack 提供了一種快捷方式，可以應用許多 flexbox 屬性在 Bootstrap 中快速輕鬆地創建佈局。概念和實現的所有功勞都歸功於 open source Pylon project.

小心！最近 Safari 新增了對帶有 flexbox 的 gap 通用類別支援，因此請考慮驗證預期的瀏覽器支援。網格排版應該沒有問題。閱讀更多.

垂直

使用 .vstack 垂直排版。預設情況下，堆疊項目是滿寬的。使用 .gap-* 通用類別在元素間增加間距。

First item

Second item

Third item

<div class="vstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

水平

使用 .hstack 水平排版。預設情況下，堆疊項目垂直置中並且只佔用必要的寬度。使用 .gap-* 通用類別在元素間增加間距。

First item

Second item

Third item

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

使用 .ms-auto 等水平 margin 通用類別：

First item

Second item

Third item

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border ms-auto">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

以及使用 vertical rules:

First item

Second item

Third item

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border ms-auto">Second item</div>
  <div class="vr"></div>
  <div class="bg-light border">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>

Sass

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