11

多分私は夢中ですが、Twitterのブートストラップで20pxのガターを取り除く方法はありませんか？たとえば、ガターをオーバーライドしてマージン：0pxを与えるアルファとオメガを使用するフレームワークを使用しました。現在、Twitterのブートストラップドキュメントにこのようなものは表示されていません。

4

9 に答える 9

9

ブートストラップを使用すると、ガターを削除するためのクラスは必要ありません。div を自動的に.row配置するクラスによって削除されるため、すべてがグリッド内にうまく配置されます。span

.row {
    margin-left: -20px;
}

少し明確にします。

960.gs グリッドなどの他のフレームワークは、.alphaandを使用してグリッド.omegaの左または右の余分なマージンを削除し、グリッド要素を行内にうまく配置できるようにします。.rowブートストラップでは、グリッド内に div を適切に配置するために必要な余分なマージンが div によって削除されるため、これはもう当てはまりません.span。

于 2012-04-25T15:26:43.290 に答える
3

アップデート：

ドキュメントにも何も表示されませんが、修正は次のとおりです。

コンテナの左端と右端のガターを削除する場合は、.alphaと.omegaのクラスを追加する必要があります。

.alpha { margin-left: 0; }
.omega { margin-right: 0; }

すべてのガターを変更したい場合：

variables.lessファイルで、ガター幅を変更できます。

// GRID
// --------------------------------------------------

// Default 940px grid
// -------------------------

@gridGutterWidth: 20px;
于 2012-04-25T15:16:03.553 に答える
3

ここからフレームワークのカスタムバージョンをダウンロードするだけです

http://twitter.github.com/bootstrap/customize.html#variables

gridGutter = 0pxにします

于 2013-03-18T06:57:29.843 に答える
2

同じ問題がありましたが、これは私のかなりいい人のためにそれを解決しました:

.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;
}
于 2014-05-15T07:42:13.123 に答える
1

これが古いトピックであることは知っていますが、それでも人々にとってはまだ問題であると確信しています。私はこの非常に便利な CSS を見つけて、それを解決してくれました。楽しみ！

/* remove spacing between middle columns */
.row.no-gutter [class*='col-']:not(:first-child):not(:last-child) {
  padding-right:0;
  padding-left:0;
}
/* remove right padding from first column */
.row.no-gutter [class*='col-']:first-child {
  padding-right:0;
}
/* remove left padding from first column */
.row.no-gutter [class*='col-']:last-child {
  padding-left:0;
}

/* only for column content visible */
.col-lg-1>div {background-color:#ddd;}

CSS ソース - http://bootply.com/109530

于 2014-05-29T02:18:52.053 に答える
0 
body {
  margin-right: -15px;
  overflow-x: hidden;
}
于 2014-05-15T06:29:12.457 に答える
0

960.gs フレームワークでアルファとオメガに似たカスタム スタイルを追加することをお勧めします。

于 2013-01-30T11:08:27.470 に答える
0

コンテンツをコンテナ流体 div に配置できます。

<div class='container-fluid'>
...
</div>

次に、(bootstrap.css で) 変更するか、container-fluid クラスをオーバーライドします。

.container-fluid {
    padding-left: 0px;
    margin-left: -20px;
  }

boostrap-responsive.css には同じクラスがあるため、モバイル画面とデスクトップ画面で異なるマージンを設定できます。

于 2012-08-27T01:18:30.677 に答える