Horizontal gutters
gutter="x-5" 属性を使うと、水平方向のガターを設定することができます。大きめのガターが使われている場合は、パディングユーティリティを使います。
不要なオーバーフローを避けるため Container コンポーネントや type=”fluid”属性を親要素に設定することもできます。
たとえば、次の例では padding="x-4" でパディングを増やしています。
<template>
<Container padding="x-4">
<Row gutter="x-5">
<Col>
<b-div padding="3">
Custom column padding
</b-div>
</Col>
<Col>
<b-div padding="3">
Custom column padding
</b-div>
</Col>
</Row>
</Container>
</template>
Row コンポーネントを overflow="hidden" 属性でラップする方法もあります。
<template>
<Container overflow="hidden">
<Row gutter="x-5">
<Col>
<b-div padding="3">
Custom column padding
</b-div>
</Col>
<Col>
<b-div padding="3">
Custom column padding
</b-div>
</Col>
</Row>
</Container>
</template>
Vertical gutters
水平方向と同様に、垂直方向のガターはページの最後にある Row コンポーネントの下にオーバーフローを引き起こす可能性があります。
このような場合は、Row コンポーネントを overflow="hidden" 属性でラップします。
<template>
<Container overflow="hidden">
<Row gutter="y-5">
<Col col="6">
<b-div padding="3">
Custom column padding
</b-div>
</Col>
<Col col="6">
<b-div padding="3">
Custom column padding
</b-div>
</Col>
<Col col="6">
<b-div padding="3">
Custom column padding
</b-div>
</Col>
<Col col="6">
<b-div padding="3">
Custom column padding
</b-div>
</Col>
</Row>
</Container>
</template>
Horizontal & vertical gutters
gutter 属性でx、もしくはyの値を設定しないと、水平・垂直ガターを設定することができます。
次の例では、より小さなガターを使用しているので、overflow="hidden" 属性でラップする必要はありません。
<template>
<Container>
<Row :gutter="2">
<Col col="6">
<b-div padding="3">
Custom column padding
</b-div>
</Col>
<Col col="6">
<b-div padding="3">
Custom column padding
</b-div>
</Col>
<Col col="6">
<b-div padding="3">
Custom column padding
</b-div>
</Col>
<Col col="6">
<b-div padding="3">
Custom column padding
</b-div>
</Col>
</Row>
</Container>
</template>
Row columns gutters
ガターは、 row columns にも追加することができます。以下の例では、レスポンシブなカラムとレスポンシブなガタークラスを使用しています。
<template>
<Container>
<Row
columns="2 lg-5"
gutter="2 lg-3"
>
<Col>
<b-div padding="3">
Row column
</b-div>
</Col>
<Col>
<b-div padding="3">
Row column
</b-div>
</Col>
<Col>
<b-div padding="3">
Row column
</b-div>
</Col>
<Col>
<b-div padding="3">
Row column
</b-div>
</Col>
<Col>
<b-div padding="3">
Row column
</b-div>
</Col>
<Col>
<b-div padding="3">
Row column
</b-div>
</Col>
<Col>
<b-div padding="3">
Row column
</b-div>
</Col>
<Col>
<b-div padding="3">
Row column
</b-div>
</Col>
<Col>
<b-div padding="3">
Row column
</b-div>
</Col>
<Col>
<b-div padding="3">
Row column
</b-div>
</Col>
</Row>
</Container>
</template>
No gutters
定義済みのガタークラスは gutter="0" 属性で取り除くことができます。
これにより、Row コンポーネントのネガティブ margin が削除され、すべての子カラムで水平方向の パディング が削除されます。
端から端までのレイアウトが必要ですか？ 親要素の Container コンポーネントや type="fluid"` 属性を削除してください。
実際には以下のようになります。
他のすべての定義済みグリッドクラス（カラム幅、レスポンシブレベル、順序変更などを含む）でも、この方法を継続して使用できることに注意してください。
<template>
<Row gutter="0">
<Col col="sm-6 md-8">
.col-sm-6 .col-md-8
</Col>
<Col col="sm-6 md-4">
.col-6 .col-md-4
</Col>
</Row>
</template>