スタック

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

このページでは

スタックは、多数のフレックスボックスプロパティを適用して Bootstrap でレイアウトをすばやく簡単に作成するためのショートカットを提供します。概念と実装の功績はすべて、オープンソースのPylon プロジェクトにあります。

注意喚起！flexbox を使用したギャップユーティリティのサポートが最近 Safari に追加されたので、意図したブラウザーのサポートを確認することを検討してください。グリッドレイアウトに問題はありません。続きを読む.

垂直

.vstack垂直レイアウトを作成するために使用します。積み重ねられたアイテムは、デフォルトで全幅です。ユーティリティを使用.gap-*して項目間にスペースを追加します。

最初のアイテム

2 番目のアイテム

3 番目の項目

html

<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-*して項目間にスペースを追加します。

最初のアイテム

2 番目のアイテム

3 番目の項目

html

<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スペーサーなどの水平マージンユーティリティを使用する:

最初のアイテム

2 番目のアイテム

3 番目の項目

html

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

そして、垂直ルールを使用すると:

最初のアイテム

2 番目のアイテム

3 番目の項目

html

<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ボタンやその他の要素を積み重ねるために使用します。

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>

サス

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