Bootstrap でガターを削除するにはどうすればよいですか?

Bootstrap でのガターの削除: 総合ガイド

はじめに

Bootstrap を使用する場合、列間の 30 ピクセルの余白がデザインの妨げになる場合があります。この記事では、負のマージンを設定せずにこの余白を削除するさまざまな方法を検討します。

Bootstrap 5

Bootstrap 5 の最新バージョンでは、専用のクラスが導入されています。 、.no-gutters。.row 要素に追加して、水平方向と垂直方向をすべて削除します。 gutters.

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

さらに、Bootstrap 5 は、列間の間隔を応答的に微調整するための一連の新しいガター クラスを提供します。

Bootstrap 4

Bootstrap 4 では、.no-gutters クラスも .row で使用できます。

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

Bootstrap 3.4.0

Bootstrap 3.4.0 では、溝を削除するために特別に設計された .row-no-gutters クラスが導入されました。

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

ブートストラップ 3 , <= 3.3.9

3.4.0 より前の Bootstrap 3 バージョンの場合、ガターはパディングを使用して作成されます。それらを削除するには、カスタム CSS クラスを定義できます。

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

.no-gutter > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}
次に、.no-gutter クラスを .row 要素に追加します。
以上がBootstrap でガターを削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。