デフォルトの Bootstrap グリッド システムは、30px以下のように各スパンにガターがある 12 列を使用します。ガターは列間の空白です。20pxガターの幅は～の間と思われます30px。ここであると仮定しましょう30px。
特定の のガタースペースを削除してdiv、行にガタースペースがないようにしたいと思います。各スパンはガターなしで互いに隣接します。
問題は、余白30px（ガター）を削除すると、行の最後に360px（12 * ）が残ってしまうことです。30px
特定の に対してのみガタースペースを削除したいとします。内にあるdivに対して削除すると仮定します。divmain_content div
div#main_content div{
/*
no gutter for the divs in main_content
*/
}
divBootstrap の応答性を失わず、行の最後にスペースを残さずに、特定のガターを削除するにはどうすればよいですか?
ベストアンサー1
Bootstrap 5 (2021 年更新)
Bootstrap 5には新しいガタークラス行全体のガターを調整するように特別に設計されたものです。ガタークラスは、各ブレークポイントに対してレスポンシブに使用できます（例gx-sm-4：）
g-0のために使用します溝なしg-(1-5)間隔ユニットを使用して水平および垂直の溝を調整するために使用します。gy-*縦溝の調整に使用しますgx-*水平方向の溝を調整するために使用します
Bootstrap 4 (追加の CSS は不要)
Bootstrap 4 には、no-gutters全体に適用できるクラスが含まれていますrow。
http://codeply.com/go/pVsGQZVVtG
<div class="row no-gutters">
<div class="col">..</div>
<div class="col">..</div>
<div class="col">..</div>
</div>
新しい間隔ユーティリティパディング/マージンを制御できます。これを使用して、列に<div class="col-3 pl-0"></div>設定されている単一の列 (つまり ) のパディング (ガター) を変更したり、左右のパディング (x 軸) の両方を削除したりできます。padding-left:0;px-0
ブートストラップ3（元の回答）
のためにブートストラップ3はるかに簡単になりました。Bootstrap 3 では、マージンの代わりにパディングを使用して「ガター」を作成するようになりました。
.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;
}
次に、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>