web-dev-qa-db-ja.com

流体コンテナBootstrap 3

bootstrap 3？

In bootstrap 2.3.2 .container-fluidクラスがあります。しかし、今ではbootstrap 3にないため、.containerクラス。私を助けてください。

csstwitter-bootstraplesstwitter-bootstrap-3
31
Hari Krishnan

ブートストラップ.「モバイルファースト」アプローチに移行しました。 .containerは、実際にボックスレイアウトを必要とする場合にのみ存在します。ただし、div.container-fluid完全に、デフォルトでは流動的なレイアウトが残っています。

たとえば、2列の流体レイアウトを使用するには、単に次を使用します。

<body>
  <header>...</header>
  <div style="padding:0 15px;"><!-- offset row negative padding -->
    <div class="row">
      <div class="col-md-6">50%</div>
      <div class="col-md-6">50%</div>
    </div>
  </div>
  <footer>...</footer>
</body>
33
Brad Christie

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

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

「完全に流動的なレイアウトを作成しようとしている（サイトがビューポートの幅全体を引き伸ばすことを意味します）は、グリッドコンテンツをパディング：0 15pxで含む要素でラップする必要があります。

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

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

Bootstrap 3.1の更新

container-fluidが再びBootstrap 3.1で返されました。現在、container-fluidを使用して全幅レイアウトを作成できます。 http://www.bootply.com/116382

20
Zim

これはv3.1.0で導入されました： http://getbootstrap.com/css/#grid-example-fluid

コミット ＃62736046 「全角コンテナおよびレイアウト用の.container-fluidバリエーション」を追加。

13
Martin

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

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

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

4
Bryce Wilson

ここには良い答えがありますので、私は次の点に関する私の自己繰り返しを避けるようにします：

  1. .container-fluidは3.0で削除されましたが、現在は3.4に戻りました（この情報は返信用ですが、答えにしたかったです）
  2. 最新バージョンを入手するには、hereを使用するか、Nugetを使用します。
  3. 適切な配置とパディングのために、行は.container（固定幅）または.container-fluid（全角）内に配置する必要があります。
  4. コンテナの最新情報については、ここでBootstrap CSSをご覧ください
1
Deep