ブートストラップ列間のガター間隔をなくす方法は?

Bootstrap の列間のガター間隔を削除する方法

Bootstrap の列間の間隔により、望ましくない場合に視覚的に乱雑な外観が作成される可能性があります。個別のマージンを設定せずにこの余白スペースを削除する方法は次のとおりです。

Bootstrap 5 以降

Bootstrap 5 では、.no-gutters クラスは .g に置き換えられました。 -0。これを .row 要素で使用すると、列間のすべての間隔を削除できます。

<div class="row g-0">
  <div class="col">...</div>
  <div class="col">...</div>
  <div class="col">...</div>
</div>

Bootstrap 5 には、特定のブレークポイントの間隔を調整できる応答性の高いガター クラスも用意されています。たとえば、.gx-sm-4 は、「小さい」ブレークポイントを持つ画面 (スマートフォンなど) でのみ水平ガターを削除します。

Bootstrap 4

In Bootstrap 4 では、.no-gutters クラスを直接使用できます。 .row:

<div class="row no-gutters">
  <div class="col"...></div>
  <div class="col"...></div>
  <div class="col"...></div>
</div>

Bootstrap 3.4.0

Bootstrap 3.4 では、専用の .row-no-gutters クラスが導入されました:

<div class="row row-no-gutters">
  <div class="col"...></div>
  <div class="col"...></div>
  <div class="col"...></div>
</div>

ブートストラップ 3 (<= 3.3.9)

Bootstrap 3.3.9 以前では、パディングを使用してガターが作成されます。それらを削除するには、次の CSS を使用する必要があります:

.no-gutter {
  margin-right: 0;
  margin-left: 0;
}

.no-gutter > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}
.no-gutter クラスを .row 要素に追加します。
以上がブートストラップ列間のガター間隔をなくす方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。