css - Bootstrap 3 の流体コンテナ

Question

ブートストラップ3で流体コンテナを作成するには?

ブートストラップ 2.3.2.container-fluidクラスにはあります。.containerしかし、現在、ブートストラップ 3 では欠落しており、クラスしかありません。私を助けてください。

Answer 1

2.xはBootstrap 3.x ( http://getbootstrap.com/getting-started/#migration ) で.container-fluid置き換えられたため、流動的ですが、全幅ではありません。.container.container

を流体コンテナーとして使用できますがrow、水平スクロール バーを避けるために少し調整する必要があります。ドキュメントからの抜粋 ( http://getbootstrap.com/css/#grid )..

「完全に流動的なレイアウト (サイトがビューポートの幅全体に広がることを意味する) を作成しようとしている人は、含まれている要素でグリッド コンテンツをラップする必要があります。パディング: 0 15px; マージンをオフセットするには: 0 -15px; .rows で使用されます。」

3.x の変更点の詳細: http://bootply.com/bootstrap-3-migration-guide

デモ: http://bootply.com/91948

ブートストラップ 3.1 の更新

container-fluidBootstrap 3.1 で再び戻ってきました。container-fluid全幅レイアウトの作成に使用できるようになりました: http://www.bootply.com/116382

Answer 2

次の CSS ルールを設定するだけで、container-fluid の子である行には、グリッド システムをオフセットする負のマージンがなくなります。

.container-fluid > .row {
    margin-left: 0;
}

これにより、他の固定幅グリッド レイアウトで問題が発生するかどうかをさらにテストします。

Answer 3

ここには良い答えがあるので、この件に関して次の点を繰り返さないようにします。

1. .container-fluid は 3.0 で削除されましたが、現在は 3.4 に戻っています (この情報は返信ですが、回答に載せたいと思いました)
2. 最新バージョンを入手するには、ここにアクセスするか、Nuget を使用してください。
3. 行は、適切な配置とパディングのために、.container (固定幅) または .container-fluid (全幅) 内に配置する必要があります。
4. Container の最新情報については、こちらの Bootstrap CSSを参照してください。