v5.1で追加

スタック

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

このページの内容

スタックは、Bootstrapでレイアウトを迅速かつ容易に作成するために、多数のフレックスボックスプロパティを適用するためのショートカットを提供します。コンセプトと実装の功績はすべて、オープンソースのPylonプロジェクトに帰属します。

注意！フレックスボックスを使用したギャップユーティリティのサポートがSafariに最近追加されたため、意図したブラウザのサポートを確認してください。グリッドレイアウトには問題ありません。詳細はこちら。

垂直方向

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

最初のアイテム

2番目のアイテム

3番目のアイテム

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

最初のアイテム

2番目のアイテム

3番目のアイテム

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

最初のアイテム

2番目のアイテム

3番目のアイテム

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>

垂直線を使用

最初のアイテム

2番目のアイテム

3番目のアイテム

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