in English
スタック
コンポーネントのレイアウトをこれまで以上に高速かつ簡単にするために、フレックスボックス ユーティリティの上に構築される簡略化されたヘルパー。
このページでは
スタックは、多数のフレックスボックス プロパティを適用して Bootstrap でレイアウトをすばやく簡単に作成するためのショートカットを提供します。概念と実装の功績はすべて、オープン ソースのPylon プロジェクトにあります。
注意喚起!flexbox を使用したギャップ ユーティリティのサポートが最近 Safari に追加されたので、意図したブラウザーのサポートを確認することを検討してください。グリッド レイアウトに問題はありません。
続きを読む.
垂直
.vstack
垂直レイアウトを作成するために使用します。積み重ねられたアイテムは、デフォルトで全幅です。ユーティリティを使用.gap-*
して項目間にスペースを追加します。
最初のアイテム
2 番目のアイテム
3 番目の項目
<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 番目の項目
<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 番目の項目
<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 番目の項目
<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>
サス
.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;
}