Vertical
垂直レイアウトを作成するには、vstack属性を使用してアクティブな状態を示します。スタックされたアイテムはデフォルトで全幅になります。アイテム間にスペースを追加するには、gap属性を使います。
First item
Second item
Third item
vue
<template>
<b-div
vstack
gap="3"
>
<b-div padding="3">
First item
</b-div>
<b-div padding="3">
Second item
</b-div>
<b-div padding="3">
Third item
</b-div>
</b-div>
</template>
Horizontal
水平レイアウトには、hstack属性を使用します。スタックされたアイテムは、デフォルトでは垂直方向の中央に配置され、必要な幅を占めるだけです。アイテム間にスペースを追加するには、gap属性を追加します。
First item
Second item
Third item
vue
<template>
<b-div
hstack
gap="3"
>
<b-div padding="3">
First item
</b-div>
<b-div padding="3">
Second item
</b-div>
<b-div padding="3">
Third item
</b-div>
</b-div>
</template>
margin="s-auto"のような水平マージンユーティリティをスペーサーとして使う。
First item
Second item
Third item
vue
<template>
<b-div
hstack
gap="3"
>
<b-div padding="3">
First item
</b-div>
<b-div padding="3">
Second item
</b-div>
<b-div padding="3">
Third item
</b-div>
</b-div>
</template>
First item
Second item
Third item
vue
<template>
<b-div
hstack
gap="3"
>
<b-div padding="3">
First item
</b-div>
<b-div padding="3">
Second item
</b-div>
<Vr />
<b-div padding="3">
Third item
</b-div>
</b-div>
</template>
Examples
ボタンやその他の要素をスタックするにはvstackを使用します。
vue
<template>
<b-div
vstack
gap="2"
margin="x-auto"
>
<b-button color="secondary">
Save changes
</b-button>
<b-button color="outline-secondary">
Cancel
</b-button>
</b-div>
</template>
hstackでインラインフォームを作成します。
vue
<template>
<b-div
hstack
gap="3"
margin="x-auto"
>
<b-input
margin="e-auto"
type="text"
placeholder="Add your item here..."
aria-label="Add your item here..."
/>
<b-button color="secondary">
Submit
</b-button>
<Vr />
<b-button color="outline-danger">
Reset
</b-button>
</b-div>
</template>