ガター Gutters

Guttersは、Bootstrapのgridシステムでコンテンツをレスポンシブにスペーシングおよび配置するために使用される、columnsの間のpaddingです。

On this page

仕組み

Guttersは、columnコンテンツ間のgapsであり、水平paddingによって作成されます。 各columnにpadding-rightとpadding-leftを設定し、負のmarginを使用して、コンテンツを配置するために各rowの最初と最後でそれをオフセットします。
Guttersは1.5rem（24px）幅から始まります。 これにより、gridをpaddingとmargin spacersスケールと一致させることができます。
Guttersはレスポンシブに調整できます。 Breakpoint固有のgutter classesを使用して、水平gutters、垂直gutters、およびすべてのguttersを変更します。

水平gutters

.gx-* classesを使用して、水平gutterの幅を制御できます。.containerまたは.container-fluid親は、より大きなguttersも使用されないように、不要なオーバーフローを避けるために調整が必要な場合があります。次の例では、.px-4でpaddingを増やしています：

Custom column 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 classを使用して.rowの周りにラッパーを追加することです：

Custom column padding

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>

垂直gutters

.gy-* classesを使用して、columnsが新しい行に折り返されるときに、row内の垂直gutterの幅を制御できます。水平guttersと同様に、垂直guttersはページの最後に.rowの下にオーバーフローを引き起こす可能性があります。これが発生した場合は、.overflow-hidden classを使用して.rowの周りにラッパーを追加します：

Custom column padding

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>

水平と垂直gutters

.g-* classesを使用して、水平方向と垂直方向のgrid guttersを制御します。以下の例では、より小さいgutter幅を使用しているため、.overflow-hiddenラッパーclassは必要ありません。

Custom column padding

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>

Row columnsのgutters

Gutter classesは、row columnsにも追加できます。次の例では、レスポンシブなrow columnsとレスポンシブなgutter classesを使用しています。

Row column

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>

Guttersなし

事前定義されたgrid classesのcolumns間のguttersは、.g-0で削除できます。これにより、.rowから負のmarginと、すべての直接の子columnsから水平paddingが削除されます。

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

実際には、次のようになります。他のすべての事前定義されたgrid classes（column幅、レスポンシブティア、並び替えなど）と一緒にこれを使用し続けることができることに注意してください。

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

Guttersの変更

Classesは、$spacers Sass mapから継承される$gutters Sass mapから構築されます。

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);