Bootstrap で特定の Div のガタースペースを削除または調整するにはどうすればよいですか?

特定の Div の余白スペースの削除

Bootstrap のデフォルトのグリッド システムには列間に 30 ピクセルの余白スペースが含まれており、余白が完全に削除された場合、行には 360 ピクセルの未使用スペースが含まれます。これに対処するには、ブートストラップの応答性を維持しながら、次の手順に従います。

ブートストラップ 5 (アップデート 2021 以降)

ブートストラップ 5 では、特定のガター クラスが導入されました:

• g-0: いいえガッター
• g-(1-5): 間隔単位を使用して水平および垂直のガターを調整します
• gy-*: 垂直のガターを調整します
• gx-*: 水平方向の調整gutters

例:

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

Bootstrap 4 (追加の CSS は不要)

Bootstrap 4 は、行:

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

ブートストラップ3 (元の回答)

Bootstrap 3 では、ガターのマージンの代わりにパディングの使用が導入されました。この効果を実現するには:

1. 新しい CSS クラスを作成します:

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

2. 最初と最後を除くすべての列からパディングを削除します:

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

3. no-gutter クラスを目的のクラスに適用します行:

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

以上がBootstrap で特定の Div のガタースペースを削除または調整するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。