ブートストラップ：コンテナーの幅を変更するにはどうすればよいですか？

125

Twitter Bootstrapを使用して、固定コンテナークラスのWebサイトを開発しましたが、クライアントはWebサイトの幅を1170pxではなく1000pxにしたいと考えています。.lessファイルは使用しません。

これを修正する簡単な方法はありますか？

twitter-bootstrap

— アレックス
ソース

ここの答えを参照してください、あなたの問題はその答えの固定のみのフィドルによって解決されると思います。

— プレ

@ prem、txですが、スパンやコンテナーなどのブートストラップクラスを使用していないため、例を取得できません。このプロジェクトに必要なのは、レスポンシブブートストラップを使用してコンテナーの最大値を940pxに設定することだけです。

— アレックス2013

75

Bootstrapサイトの[ カスタマイズ]セクションに移動して、希望のサイズを選択します。変数を設定する必要が@gridColumnWidthあり@gridGutterWidthます。

たとえば、次のように@gridColumnWidth = 65pxして@gridGutterWidth = 20px上の結果を1000pxレイアウト。

それをダウンロードしてください。

— Albertedevigo
ソース

（12 *（gridColumnWidth）+ 12（gridGutterWidth））は1000に等しくないため、gridColumnWidth変数とgridGutterWidth変数を変更しても、正確な1000pxコンテナーに到達することはできません。あれは正しいですか？

— プレミア

15

理論的には、1000pxに一致する無限の組み合わせがあります。例：12 * 65 + 11 * 20 = 1000（列の間の溝は11しかない）。

— albertedevigo 2013年

ハァッ！私は本当に単純なことを認識しませんでした...とにかくあなたのものは適切な解決策でした。

— プレミア

あなたの投稿をありがとう、それは役に立ちました;）ただのメモ：実際には、幅1000pxのフルピクセルを使用する正確に7つのソリューションがあります。（列幅

— 10、21、32、43、54、65

@dfherr「実際に」と言ったときの正確な意味はわかりませんが、CSSはピクセルの10進数値をサポートしていることに注意してください。したがって、無限の解決策があります。w3.org/TR/CSS21/syndata.html#length-units

— albertedevigo

228

これが解決策です：

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

@Bastardoの回答のようにBootstrapをカスタマイズするのと比べて、これを行う利点は、Bootstrapファイルを変更しないことです。たとえば、CDNを使用している場合でも、ほとんどのBootstrapをCDNからダウンロードできます。

— mcbjam
ソース

10

ほとんどの回答はCDNを無視しています。あなたの答えは完璧な解決策です。

— Charles Watson

2

CDNを使用している人に最適です。ビルド時にLESS（4が到着したとき、SASS）を変更することは、独自のBootstrap CSSをホストする人々に最適です。ただし、提供されたものの後にインポートされたカスタムLESS（またはSASS）を変更すると、（通常は）差分を実行しなくても、基礎となるLESSをアップグレードできます。

— Greg Pettit

2

私はこれが本当に遅いことを知っていますが、上記のコードにwidth：autoを追加すると、コンテナーが大きくなる傾向があるため、コンテナーを最大1170より大きくすることができます。

— Rick Calder

それは私が探していたものです。ありがとうございました。

— テデバス

20

あなたはLESSファイルを使用しないことを言っているあなたの背中の後ろに持っていた人を縛っています。私は2.0を使用して最初のTwitter Bootstrapテーマを作成し、CSSですべてを行いました。override.cssファイルを作成しました。物事が正しく機能するようになるまで数日かかりました。

これで3.0ができました。CSSに慣れていれば、簡単なLESSを習得するのにかかる時間は、これらのクレイジーなCSSオーバーライドのすべてを実行するよりも短くて済みます。必要な変更を加えるのは簡単です。

Bootstrap 3.0では、コンテナークラスが幅を制御し、含まれるすべてのスタイルがコンテナーを満たすように調整されます。コンテナの幅の変数は、variables.lessファイルの一番下にあります。

// Container sizes
// --------------------------------------------------

// Small screen / tablet
@container-tablet:            ((720px + @grid-gutter-width));

// Medium screen / desktop
@container-desktop:           ((940px + @grid-gutter-width));

// Large screen / wide desktop
@container-lg-desktop:        ((1020px + @grid-gutter-width));

一部のサイトでは、1020ディスプレイを満たすのに十分なコンテンツがないか、審美的な理由から狭いフレームが必要です。BSは12列のグリッドを使用するため、960のような倍数を使用します。

— バスタード・スシオ
ソース

4

動作しますが@container-sm、変数名は、@container-mdおよび@container-lg（現在）

— Andreas Dolk

1

@Bastardo素敵名+1

— オメルアン

18

@mcbjamはすでにこの回答を提供していますが、ここでもう少し説明します。

BSをダウンロードしなくても、CSSファイルのメディアクエリを使用して簡単に変更できます。私はこれをやっただけで、それは美しく機能します。

メディアクエリの「min-width」値は、1200px（またはそこに含めるために選択した任意の幅）より大きい画面でのみ、コンテナーの幅を1000pxに変更するようCSSに指示します。これにより、サイトの応答性が維持されるため、画面サイズがその値を下回った場合（小さいモニター、タブレット、スマートフォンなど）、サイトは小さい画面に合わせて調整されます。

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

— ジェフ・シュワルティング
ソース

13

Sassを使用している場合のブートストラップ4の場合、ここに編集する変数があります

// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;

この変数を上書きするために、ブートストラップをインポートする前に、.sassファイルで！defaultなしで$ container-max-widthsを宣言しました。

注：xl値を変更するだけでよいので、ブレークポイントについて考える必要はありませんでした。

— 海賊がんばれ
ソース

12

独自のコンテンツコンテナークラスを1000px幅のプロパティで設定し、コンテナーの代わりにコンテナー流体ブーストラップクラスを使用します。

機能しますが、最善の解決策ではない可能性があります。

— ジオ
ソース

6

ラッパーセレクターを使用し、そのラッパーの内側に100％の幅を持つコンテナーを作成して、ページ全体をカプセル化します。

<style>#wrapper {width: 1000px;} 
#wrapper .container {max-width: 100%; display: block;}</style>
<body>
<div id="wrapper">
  <div class="container">
    <div class="row">....

これで最大幅が1000pxに設定され、それ以下またはsassは必要ありません。

— ラリー・ジャッド
ソース

0

コンテナサイズ

@container-large-desktop
(1140px + @grid-gutter-width) -> (970px + @grid-gutter-width)

セクションコンテナサイズの変化1140に970

お役に立てば幸いです。

正解ありがとうございます。ブートストラップをカスタマイズするためのリンク：https : //getbootstrap.com/docs/3.4/customize/

— だからサント
ソース

-3

これらのCSSをCSSスタイルに追加します。これを上書きするために、ブートストラップcssファイルが追加された後にこれを追加することをお勧めします。

html, body {
 height: 100%;
 max-width: 100%;
 overflow-x: hidden;
}`

— マヘンドラ
ソース