ガター
ガターは列間のパディングであり、Bootstrap グリッド システムでコンテンツをレスポンシブに配置および配置するために使用されます。
それらがどのように機能するか
-
ガターは、水平方向によって作成される列コンテンツ間のギャップ
padding
です。padding-right
各列にとを設定しpadding-left
、負の値を使用しmargin
て各行の開始位置と終了位置をオフセットし、コンテンツを揃えます。 -
側溝は
1.5rem
(24px
) 幅から始まります。これにより、グリッドをパディングとマージン スペーサーのスケールに合わせることができます。 -
ガターは反応よく調整できます。ブレークポイント固有のガター クラスを使用して、水平ガター、垂直ガター、およびすべてのガターを変更します。
横樋
.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>
縦樋
.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>
横樋・縦樋
.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>
行列の溝
行の列にガター クラスを追加することもできます。次の例では、レスポンシブ行列とレスポンシブ ガター クラスを使用しています。
<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>
ガターなし
事前定義されたグリッド クラスの列間のガターは、 で削除できます.g-0
。これにより、すべての直接の子列から負margin
の s.row
と水平方向が削除されます。padding
端から端までの設計が必要ですか? 親.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>
ガターを変更する
クラスは、$gutters
Sass マップから継承された Sass マップから構築され$spacers
ます。
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);