Added in v5.1 View on GitHub

スタック Stacks

flexboxユーティリティの上に構築された省略形のヘルパーで、これまで以上に速く簡単にコンポーネントレイアウトを作成できます。

On this page

Stacksは、Bootstrapでレイアウトを素早く簡単に作成するために、複数のflexboxプロパティを適用するショートカットを提供します。コンセプトと実装のすべてのクレジットは、オープンソースのPylonプロジェクトに帰属します。

注意！ flexboxでのgapユーティリティのサポートは、Safari 14.5より前では利用できないため、意図するブラウザサポートを確認することを検討してください。Gridレイアウトには問題はありません。詳細を読む

垂直

.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のような水平方向のmarginユーティリティをスペーサーとして使用する：

First item

Second item

Third item

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>

そしてvertical rulesと一緒に：

First item

Second item

Third item

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