ブートストラップ グリッド システムでガター スペースを削除するにはどうすればよいですか?

特定の Div の余白スペースを削除する

はじめに

Bootstrap グリッド システムは、列間にデフォルトの 30 ピクセルの余白を採用します。クリーンで一貫したレイアウトに貢献します。ただし、行内の特定の要素については、このガター スペースを削除することが望ましい場合があります。この記事では、Bootstrap の応答性を損なったり、見苦しい空きスペースを導入したりすることなく、この目標を達成するためのテクニックを検討します。

Bootstrap 3.x

Bootstrap 3.x の場合、ソリューションは次のようになります。もっと直接的に。溝の作成にパッドが採用され、取り外しが容易になりました。次の 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;
}

特定の div の余白を削除するには、対応する行に「no-gutter」クラスを割り当てるだけです。

Bootstrap 4.x

Bootstrap 4.x には、組み込みのユーティリティ クラスが含まれています。望ましい効果を実現する「ガターなし」。

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

Bootstrap 5.x

Bootstrap の最新バージョンでは、ガター間隔をさらに細かく制御できます。ガタークラスの導入により。 「g-0」を使用して樋を完全に削除するか、「g-1-5」クラスを使用して調整します。これらのクラスは、768 ピクセルより小さい画面の水平ガターを調整する「gx-sm-4」などのブレークポイントを使用して応答的に適用することもできます。

以上がブートストラップ グリッド システムでガター スペースを削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。