Gutters (ガター)
ガターはカラム間のパディングで、Bootstrap グリッドシステムのコンテンツを配置・整列させるために使います。
How they work
-
ガターとは、水平方向の
padding
によって作られるカラムの隙間のことです。 各カラムにpadding-right
とpadding-left
を設定し、各行の最初と最後にネガティブmargin
でオフセットしてコンテンツを揃えます。 -
ガターの初期値は
1.5rem
(24px
) です。 カスタムしてグリッドを padding and margin spacers のスケールに合わせることができます。 -
ガターはレスポンシブに調整することができます。 ブレークポイント固有のガタークラスを使用して、水平、垂直、およびすべてのガターを設定できます。
Horizontal gutters
.gx-*
クラスを使うと、水平方向のガターを設定することができます。大きめのガターが使われている場合は、パディングユーティリティを使います。不要なオーバーフローを避けるため .container
や .container-fluid
を親要素に設定することもできます。たとえば、次の例では .px-4
でパディングを増やしています。
<div class="container px-4">
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
.row
を .overflow-hidden
ラップする方法もあります。
<div class="container overflow-hidden">
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
Vertical gutters
.gy-*
クラスを使うと、垂直方向のガターを設定することができます。水平方向と同様に、垂直方向のガターはページの最後にある .row
の下にオーバーフローを引き起こす可能性があります。このような場合は、.row
を .overflow-hidden
でラップします。
<div class="container overflow-hidden">
<div class="row gy-5">
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
Horizontal & vertical gutters
.g-*
クラスは水平・垂直ガターを設定することができます。次の例では、より小さなガターを使用しているので、.overflow-hidden
でラップする必要はありません。
<div class="container">
<div class="row g-2">
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
Row columns gutters
ガターは、row columns にも追加することができます。以下の例では、レスポンシブなカラムとレスポンシブなガタークラスを使用しています。
<div class="container">
<div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
</div>
</div>
No gutters
定義済みのガタークラスは .g-0
で取り除くことができます。これにより、.row
のネガティブ margin
が削除され、すべての子カラムで水平方向の パディング
が削除されます。
端から端までのレイアウトが必要ですか? 親要素の .container
や .container-fluid
を削除してください。
実際には以下のようになります。他のすべての定義済みグリッドクラス(カラム幅、レスポンシブレベル、順序変更などを含む)でも、この方法を継続して使用できることに注意してください。
<div class="row g-0">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
Change the gutters
ガタークラスは $spacers
を継承した $gutters
Sass マップから生成されます。
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);