応答性を損なうことなく特定の Div からブートストラップ ガターを削除するにはどうすればよいですか?

ブートストラップの応答性に影響を与えずに特定の Div のガター スペースを削除する方法

ブートストラップ レイアウトでは、ガターによって列の間に通常約 20 ～ 30 ピクセル幅の空白が作成されます。 。これにより、視覚的に魅力的な分離が実現しますが、レイアウトの応答性を損なうことなく、特定の div のこの余白を削除したい場合があります。

Bootstrap 3 のソリューション

Bootstrap 3 の場合、側溝の作成にマージンの代わりにパディングを使用することで、側溝の削除が簡単になりました。 CSS コードは次のとおりです:

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

.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
  padding-right: 0;
  padding-left: 0;
}

Bootstrap 3 で特定の div のガターを削除するには、クラス「no-gutter」を対応する行に追加するだけです:

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

Bootstrap 4と 5 つのソリューション

ブートストラップ4 では、行全体から余白を削除するための「no-gutters」クラスが導入されています。

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

Bootstrap 5 は、これをさらに拡張して、きめ細かなガター クラスを使用します。水平方向と垂直方向の両方の間隔を制御します。クラスには以下が含まれます:

• g-0 (ガターなし)
• g-(1-5) で間隔を調整
• gy-* で垂直方向の間隔を調整
• gx-* で水平方向の間隔を調整します

たとえば、応答性を維持しながら特定の div のガター:

#main_content .col {
  padding: 0 !important;
}

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

以上が応答性を損なうことなく特定の Div からブートストラップ ガターを削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。