ブートストラップ100％幅/全幅

Question

ブートストラップで新しいウェブサイトを作成したいと思いますが、それは100％の幅にする必要がありますが、私はそれが流動的であることは望ましくありません。少なくとも今はない。

私は問題があります：ブートストラップ標準を使用すると960pxに制限され、流体レイアウトではフルサイズですが、流体レイアウトのように振る舞います。

静的なブートストラップレイアウトで100％の幅を持つ方法はありますか？

Answer 1

100％の幅...静的

これは矛盾のビットです。 100％幅のレイアウトは静的ではありません。

ブートストラップでは、.containerクラスを使用して定義済みの幅を設定します。デフォルトよりも大きくしたい場合は、これを目的のページ幅に増やしてください。ブートストラップのspan*とoffset*クラスのサイジングは、それに応じて調整する必要があります。

Answer 2

私はあなたが余白/詰め物を両面にしたくないということを推測します。あなたのメッセージが意味する唯一の方法です - 100％の幅は画面の全面を占めるので静的ではありません - サイズはウィンドウの大きさによって変わります）

私たちは持っていませんユースケースまたはJSFiddleを使用しているため、正確なコードを提供することはできませんが、本体に余白があることを確認する必要があります：0と埋め込み：0そしてFirebugまたはChrome Web Devツールで他のdivを探します。

あなたのレイアウトを流動的にしたいが、ある特定のポイントで成長が止まるようにするには、身体または一般的な容器/ラッパー要素にmax-width：1000px（たとえば）を適用する必要があります。

Answer 3

応答機能を無効にするには、bootstrap-responsive.cssを含めないでください。

ギャッター/マージンが不要な場合は、コンテンツをコンテナの外に置くことができますが、自分でコンテンツのレイアウトを維持する必要があります（グリッドは使用できますがコンテンツのセンタリングはできません）。 .navbarのようなブートストラップコンポーネントの大部分を忘れないでください。その幅を制御するには.containerが必要です。

私の仕事の1つは全コンテンツを保持するフルスクリーンカルーセルが必要なので、コンテンツを中央に配置するには.containerでコンテンツをラップします。

Answer 4

これは、ブートストラップ3で実現するのは簡単です、ちょうどあなた自身と.containerのdiv置き換える：ヘッズアップのためのエリックの花に

.my-fluid-container { 
    padding-left: 15px; 
    padding-right: 15px; 
    margin-left: auto; 
    margin-right: auto; 
} 

ありがとう： http://www.helloerik.com/bootstrap-3-grid-introduction#fluid

を更新

ブートストラップ3には、流体容器クラスが組み込まれています。<div class="container-fluid">を使用してください。See docs.

Answer 5

私はかなりメインの質問にはお答えする方法を見つけ出すが、ここであなたがOP

としてのような独自のクラスを使用し、.containerを使用していない、上記言っ欲しいものだことはできません。

.my-fluid-container { 
    padding-left: 15px; 
    padding-right: 15px; 
    margin-left: auto; 
    margin-right: auto; 
} 

グリッドを構築するときには、列にcol-xs- *を使用してください。これで、100％幅のサイトが「モバイル」ビューに積み重ねられなくなります。ようこそ90's;）