2

TwitterBootstrapサイトは次のようになっています。

単一のによって提供されるほぼすべてのWebサイトまたはページのデフォルトでシンプルな940px幅の中央レイアウト<div class="container">。

http://twitter.github.com/bootstrap/scaffolding.html#layoutsからの引用

これはまさに私がHTMLに持っているものですが、要素を調べると、このCSSがそれに適用されていることがわかります。

.container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
    width: 1170px;
}

ちなみに、CSSルールを追加してオーバーライドすると...

div.container{
  width:940px;
}

次に、div.container内の要素は、div.container自体よりも幅が広く、見た目がおかしくなります。

では、なぜTwitter Bootstrapの「修正済み」レイアウトが修正されていないのですか？どうすれば修正できますか？

4

3 に答える 3

6

アップデート

ブートストラップの新しいバージョンでは、2.1.0以降（私は思う）、githubvariables.lessの： sourceでレスポンシブグリッドサイズを変更できます

したがって、LessからCSSをコンパイルする場合は、これらの変数を変更できます。それ以外の場合、以下の解決策は引き続き有効です。

これは、レスポンシブレイアウトを含めたためです。ドキュメントを確認してください

このファイルを見ると、github response-1200px-min.less（2.0.4）またはgithub response-1200px-min.less（2.1.0）

あなたはそれを見ることができます

@gridColumnWidth: 70px; // First parameter
@gridGutterWidth: 30px; // Second parameter

これは70*12 + 30*(12-1) = 1170px（12は@gridColumns）を与えます。

したがって、静的で応答のない940ピクセル幅のグリッドが必要な場合は、bootstrap-reponsive.cssインクルードからファイルを削除する必要があります。

それと同等のRoRに関しては、どんな入力でもありがたいです。

于 2012-08-10T15:52:52.153 に答える
2

Twitter Bootstrapの最新バージョンをお持ちですか？私のbootstrap.cssは言います（197行目）：

.container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
    width: 940px;
}

あなたが言っているように、あなたはtwitter-bootstrap-railsを使用していvendor/toolkit/twitter/bootstrap/variables.lessます。

// Default 940px grid
// -------------------------
@gridColumns:             12;
@gridColumnWidth:         60px;
@gridGutterWidth:         20px;
@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

これがhttps://github.com/seyhunak/twitter-bootstrap-railsの標準ファイルです。

他のバージョンを使用している可能性がありますか？

于 2012-08-10T15:41:23.203 に答える
0

ブートストラップに固定された用語を理解していないと思います。修正されたBootstrap言及は、ブラウザのサイズに基づいてコンテンツの幅のサイズを変更しないことを意味しますが、Fluidは変更します。

したがって、コンテナを変更する場合は、rowクラスのデフォルトの幅も変更する必要があります。すなわち：.row { width: 940px; }

他のクラスでもそうしなければならないかもしれません。Bootstrapは、ここにカスタマイズページも提供します

お役に立てば幸いです。

于 2012-08-10T15:51:48.970 に答える