ブートストラップ3 - デスクトップのコンテナ幅を最大940pxに設定しますか？

Question

Twitter Bootstrap 3を使用して新しいセクション全体をウェブサイトに追加していますが、コンテナのヘッダーとフッター{includes}が捨てられるため、コンテナのデスクトップ全体のサイズは940px以上にはなりません。

したがって、940pxは列の場合12 x 60 = 720px、溝の場合11 x 20 = 220pxで動作します。十分ですが、Customizeセクションに 'No' @ColumnWidthフィールド/設定があるので、これをBootstrap 3にどのように入力しますか？

@ container-lg-desktopと@ container-desktopの両方を940pxに設定しようとしましたが、動作しません。

Answer 1

最初に、小さなグリッドを考えてみましょう。http://getbootstrap.com/css/#grid-optionsを参照してください。 750ピクセルの最大のコンテナの幅は、多分、小さなへのあなたのために（も読み：Why does Bootstrap 3 force the container width to certain sizes?）になります

のmax-コンテナの幅を設定するために小グリッド利用メディアクエリを使用している場合：

@media（最小幅： 768ピクセル）{ 。容器{ 最大幅：750ピクセル; } }

また、この質問を読む：Bootstrap 3 - 940px width grid?、可能な重複？列および11×20 = 220px

ため

12×60 = 720px、グリッドの両側に20ピクセルのガターはそう220 + 720 + 40は980px

が行います

「いいえ」@ColumnWidth

あなたは幅がvariables.lessでの設定に基づいて動的に計算されますcolumsはありません。 @grid-columnsと@grid-gutter-widthを設定できます。列の幅はmixins.lessにgrid.less経由割合として設定されます。

.calc-grid(@index, @class, @type) when (@type = width) { 
    .col-@{class}-@{index} { 
    width: percentage((@index/@grid-columns)); 
    } 
} 

更新 設定;, @コンテナ-デスクトップを20ピクセルにする@グリッド・ガター幅：940px;、 @ container-large-desktop：@ container-desktopおよび再コンパイルブートストラップ。

Answer 2

ブートストラップ3には、はるかに簡単なソリューション（IMO）があり、カスタムLESSをコンパイルする必要はありません。 「カスケードスタイルシート」のカスケードを利用するだけです。

は/css/custom.cssが独自のスタイル定義であるので...

<link type="text/css" rel="stylesheet" href="/css/bootstrap.css" /> 
<link type="text/css" rel="stylesheet" href="/css/custom.css" /> 

のようなあなたのCSSの読み込みを設定します。ビューポートが1200pxまたは大きいとき、そのファイルの中に、ブートストラップのデフォルトwidth: 1170px設定を上書きします...

@media (min-width: 1200px) { 
    .container { 
    width: 970px; 
    } 
} 

これを、次の定義を追加します。

ブートストラップ3.0でテスト済みです。2

Answer 3

オリジナルのLESSバージョンのブートストラップを使用することをお勧めします（githubから入手する）。

オープンvariables.lessと//メディアを探すには、ブレークポイント

はこのコードを見つけて、ブレークポイントの値を変更照会：例えば9999pxに

// Large screen/wide desktop 
@screen-lg:     1200px; // change this 
@screen-lg-desktop:   @screen-lg; 

変更して、これはブレークポイントを防ぐことができますあなたのサイトは常に940pxのコンテナを持つ以前のメディアクエリをロードします

Answer 4

ブートストラップをコンパイルしたくない場合は、以下をコピーしてカスタムCSSファイルに挿入してください。オリジナルのブートストラップCSSファイルを変更することはお勧めしません。また、ブートストラップの元のcssをcdnからロードする場合は、それを変更することはできません。

カスタムCSSファイルでこれを貼り付けます。

@media (min-width:992px) 
    { 
     .container{width:960px} 
    } 
@media (min-width:1200px) 
    { 
     .container{width:960px} 
    } 

私はここでそれを収容することができます何のために960ピクセル幅に自分のコンテナを設定し、デフォルト値に残りのメディアサイズを保管しております。この問題を940pxに設定することができます。

Answer 5

動作しない場合は、その後

@media（最小幅：1200px）を使用している場合は、{ .container { 幅： "重要！"！970px を重要。 } }