web-dev-qa-db-ja.com

Bootstrap 3：デフォルトのグリッドを幅960pxに設定する方法は？

Bootstrap 3を使用していて、クライアントはWebサイトコンテナーの幅を960pxに設定することを望んでいます。CSSファイルを直接編集するか、これを行うための最良の方法は何ですか？ 「少ない」について。ダウンロードをカスタマイズできますか？ありがとう！

更新：サイトはレスポンシブである必要はないので、レスポンシブネスを無効にしてCSSに960pxの幅を追加するだけでそれを実行できますか、それとも他の場所で問題が発生しますか？

lesstwitter-bootstrap-3
13
redshift

Bootstrap3の場合、デフォルトで960pxを取得するようにカスタマイズできます（ http://getbootstrap.com/customize/ ）

  1. @ container-large-desktopを（（1140px + @ grid-Gutter-width））から（（940px + @ grid-Gutter-width））に変更します。
  2. @ grid-Gutter-widthを30pxから20pxに変更します。

次に、カスタムバージョンのbootstrapをダウンロードして使用します。デフォルトでは、960pxになります。

52
Henry Neo

最大幅を810pxにしたかったので、次のようなメディアクエリを使用しました。

@media (min-width: 811px) {    
    .container{
        width:810px;
    }
}
4
AnotherOther

ブートストラップグリッドシステムはFLUIDです。これは、パーセンテージで機能することを意味します。

幅をページラッパーに設定するだけで、準備が整います

HTML：

<body>
    <div class="page-wrapper">
        <!-- Your bootstrap grid/page markup here -->
    </div>
</body>

CSS：

.page-wrapper {
    width: 960px; /* Your page width */
    margin: 0 auto; /* To center your page within the body */
}
3
Dennis Johnsen

最も簡単な方法は、すべてをこのようなコンテナにラップすることです。

.container-fixed {
  margin: 0 auto;
  max-width: 960px;
}

http://bootply.com/9494

または、LESS /カスタムビルドを使用することもできます： http://getbootstrap.com/customize/

0
Codeply-er