ガター

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

このページの内容

動作原理

ガターはカラムコンテンツ間の隙間であり、水平方向のpaddingによって作成されます。各カラムにpadding-rightとpadding-leftを設定し、負のmarginを使用して各行の先頭と末尾でオフセットし、コンテンツを揃えます。
ガターの幅はデフォルトで1.5rem（24px）です。これにより、グリッドをpadding と margin のスペーサーのスケールと合わせることができます。
ガターはレスポンシブに調整できます。ブレークポイント固有のガタークラスを使用して、水平ガター、垂直ガター、すべてのガターを変更できます。

水平方向のガター

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

カスタムカラムパディング

HTML

<div class="container px-4 text-center">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3">Custom column padding</div>
    </div>
  </div>
</div>

別の解決策として、.overflow-hiddenクラスを適用したwrapperを.rowの周りに追加する方法があります。

カスタムカラムパディング

HTML

<div class="container overflow-hidden text-center">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3">Custom column padding</div>
    </div>
  </div>
</div>

垂直方向のガター

.gy-*クラスを使用して、カラムが改行された場合の行内の垂直ガターの幅を制御できます。水平ガターと同様に、垂直ガターはページの末尾で.rowの下にオーバーフローを引き起こす可能性があります。この場合は、.overflow-hiddenクラスを適用したwrapperを.rowの周りに追加します。

カスタムカラムパディング

HTML

<div class="container overflow-hidden text-center">
  <div class="row gy-5">
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
  </div>
</div>

水平方向と垂直方向のガター

.g-*クラスを使用して、水平方向と垂直方向のグリッドガターを制御します。以下の例では、より小さなガター幅を使用しているため、.overflow-hidden wrapperクラスは必要ありません。

カスタムカラムパディング

HTML

<div class="container text-center">
  <div class="row g-2">
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">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">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
  </div>
</div>

ガターなし

事前に定義されたグリッドクラスのカラム間のガターは、.g-0を使用して削除できます。これにより、.rowからの負のmarginと、すべての直接の子カラムからの水平方向のpaddingが削除されます。

エッジツーエッジのデザインが必要ですか？親の.containerまたは.container-fluidを削除し、オーバーフローを防ぐために.rowに.mx-0を追加します。

実際には、次のように表示されます。これは、他のすべての事前に定義されたグリッドクラス（カラム幅、レスポンシブティア、並べ替えなど）と併用できます。

.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>

ガターの変更

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