Added in v5.1 GitHubで見る

スタック

Stacks

フレックスボックスユーティリティの上に構築される省略記法ヘルパーで、コンポーネントレイアウトをこれまで以上に迅速かつ簡単にします。

項目

スタックは、Bootstrapで素早く簡単にレイアウトを作成するために、多くのフレックスボックス・プロパティを適用するためのショートカットを提供します。このコンセプトと実装はすべて、オープンソースのPylonプロジェクトによるものです。

気をつけてください!フレックスボックスによるギャップユーティリティのサポートが最近Safariに追加されました。そのため、意図するブラウザのサポートを確認することを検討してください。グリッドレイアウトは問題ありません。もっと読む。

垂直方向

.vstackを使って垂直方向のレイアウトを作成できます。スタックされたアイテムはデフォルトで全幅です。アイテム間にスペースを追加するには.gap-*ユーティリティを使用します。

First item

Second item

Third item

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-*ユーティリティを使用します。

First item

Second item

Third item

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のような水平のマージンユーティリティをスペーサーとして使う：

First item

Second item

Third item

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>

縦仕切り線を使う：

First item

Second item

Third item

html

<div class="hstack gap-3">
  <div class="p-2">First item</div>
  <div class="p-2">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;
}