異なるバージョン間でブートストラップのガターを削除するにはどうすればよいですか?

Bootstrap での余白の削除

Bootstrap では、列は 30 ピクセルの余白で区切られていますが、場合によってはそれを削除する必要があります。この記事では、margin-left:-30px アプローチに頼らずに余白を削除するソリューションについて詳しく説明します。

Bootstrap 5 (最新)

Bootstrap 5 では、簡素化されたソリューションが導入されています。 .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 4

Bootstrap 4 は、.no-gutters クラス、Bootstrap に似ています5:

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

Bootstrap 4 には応答性の高いガター クラスも含まれており、柔軟性が向上しています:

<!-- Remove gutters on small and above breakpoints -->
<div class="row g-0 g-sm-3">
  <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>

Bootstrap 3 (

以前ブートストラップ バージョン (3.3.9 までの 3)、ガターを削除するにはマージンとマージンの両方を調整する必要があります。 padding:

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

/* .row > [class*="col-"] */
.no-gutter > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

.no-gutter クラスを .row に追加すると、設定は完了です:

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

Utilizingこれらのテクニックを使用すると、Bootstrap での余白を簡単に削除し、望ましい視覚的なレイアウトを実現できます。

以上が異なるバージョン間でブートストラップのガターを削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。