web-dev-qa-db-ja.com

Bootstrap-列間のガターを削除する方法

列間の30pxガターを削除するにはどうすればよいですか？ただし、margin-left:-30px？

<div class='container'>
  <div class='row'>

    <div class='col-lg-1'></div>
    <div class='col-lg-1'></div>
    <div class='col-lg-1'></div>

  </div>
</div>
twitter-bootstraptwitter-bootstrap-3bootstrap-4
20
Friede Petr

列のパディングを削除するより良い方法は、.no-padクラスを.rowに追加することです。

 <div class="row no-pad">

...そしてこのCSSを追加します。

.row.no-pad {
  margin-right:0;
  margin-left:0;
}
.row.no-pad > [class*='col-'] {
  padding-right:0;
  padding-left:0;
}

first-とlast-childのアイテムを探すのは悪い考えです。実際には.rowはビューポートの左右のオフセットを処理するためのものです。上記の方法では、すべての.col-*sのスタイルは同じままです。これは、応答性、特にモバイルサイズでのスタックを考慮した場合もはるかに簡単です（mdサイズ以下のデモを試してください）。

直接子孫CSSセレクター>は、.no-padがその.rowの直接の子.colsにのみ適用されることを意味するため、その後にネストされた列構造にパディングを設定できます（またはしない場合）。

また、属性セレクター[class*='col-']を使用すると、各列に追加の非ブートストラップクラスを追加する必要がなくなります。

デモは次のとおりです。 http://www.bootply.com/Ae3xTyAW5D

42
Francis Booth

2018年に更新

ブートストラップ4には、.no-guttersに追加できる.rowクラスが含まれるようになりました。

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

ブートストラップ4： http://www.codeply.com/go/OBW3RK1ErD

Bootstrap 3.4.0 +ガターはパディングを使用して作成されますが、.row-no-guttersクラスが追加されました。 Bootstrap 3.4 のドキュメント）を参照して、「ガターの削除」を探してください。

使用できるHTML：

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

Bootstrap 3 +、<= 3.3.9余白はパディングを使用して作成されます。また、外側の列の周りの間隔が影響を受けないように、負のマージンを調整する必要があります。

.no-Gutter {
  margin-right: 0;
  margin-left: 0;
}

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

no-Gutterクラスを.rowに追加するだけです。

デモ： http://bootply.com/107458

30
Zim

維持するのが難しい修正を適用する代わりに、独自のカスタマイズバージョンBootstrapから Customizer を使用して、Gutterを希望のサイズに設定できます（または0に設定して、完全に削除します。

4
Maciej Gurban

ブートストラップ3は、v3.4.0で .row-no-gutters class を導入しました。これは、宣伝どおりに機能します。

行とその列から余白を削除するには、このクラスを<div>に追加するだけです。

2
dyve