ガター

ガターは列間のパディングであり、Bootstrap グリッドシステムでコンテンツをレスポンシブに配置および配置するために使用されます。

このページでは

それらがどのように機能するか

ガターは、水平方向によって作成される列コンテンツ間のギャップpaddingです。padding-right各列にとを設定しpadding-left、負の値を使用しmarginて各行の開始位置と終了位置をオフセットし、コンテンツを揃えます。
側溝は1.5rem( 24px) 幅から始まります。これにより、グリッドをパディングとマージンスペーサーのスケールに合わせることができます。
ガターは反応よく調整できます。ブレークポイント固有のガタークラスを使用して、水平ガター、垂直ガター、およびすべてのガターを変更します。

横樋

.gx-*クラスを使用して、水平ガター幅を制御できます。.containerまたは親は.container-fluid、一致するパディングユーティリティを使用して、不要なオーバーフローを回避するために大きなガターも使用する場合に調整する必要がある場合があります。たとえば、次の例では、次のようにパディングを増やしています.px-4。

カスタム列パディング

html

<div class="container px-4 text-center">
  <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クラスの周りにラッパーを追加することです。

カスタム列パディング

html

<div class="container overflow-hidden text-center">
  <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クラスにラッパーを追加します。

カスタム列パディング

html

<div class="container overflow-hidden text-center">
  <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クラスを使用して水平ガター幅を制御できます。次の例では、より小さなガター幅を使用しているため、ラッパークラスを追加する必要はありません。

カスタム列パディング

html

<div class="container text-center">
  <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>

行列の溝

行の列にガタークラスを追加することもできます。次の例では、レスポンシブ行列とレスポンシブガタークラスを使用しています。

行の列

html

<div class="container text-center">
  <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

端から端までの設計が必要ですか? オーバーフローを防ぐために、親の.containeror.container-fluidを削除してに追加.mx-0します。.row

実際には、次のようになります。これは、他のすべての事前定義されたグリッドクラス (列幅、レスポンシブティア、並べ替えなどを含む) で引き続き使用できることに注意してください。

.col-sm-6 .col-md-8

.col-6 .col-md-4

html

<div class="row g-0 text-center">
  <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>

ガターを変更する

クラスは、$guttersSass マップから継承された 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,
);