twitter-bootstrap - Bootstrap 4 / Bootstrap 5のグリッド列からパディングガターを削除する

Question

ブートストラップ 4 でガターレス グリッドを作成するにはどうすればよいですか?

ガターを削除するための公式 API はありますか、それとも手動ですか?

Answer 1

Bootstrap5:ガターユーティリティ が付属

• すべてのビューポートg-0..g-5
• レスポンシブ ビューポートg-sm-0..g-lg-5
• 水平/垂直gy-0..gx-5

ガター幅がゼロの例:

<div class="container">
  <div class="row g-0">
    <div class="col-6">
      <div class="p-3 border bg-light">...</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">...</div>
    </div>
  </div>
</div> 

Bootstrap4:すぐ に使用.no-guttersできます。ソース: https://github.com/twbs/bootstrap/pull/21211/files

ブートストラップ3:

カスタム CSS が必要です。

スタイルシート:

.row.no-gutters {
  margin-right: 0;
  margin-left: 0;

  & > [class^="col-"],
  & > [class*=" col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

次に使用します：

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

そうなる：

• 行から余白を削除
• 行の真下にあるすべての列からパディングを削除します

Answer 2

この css コードを使用して、ブートストラップでガターレス グリッドを取得できます。

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

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