4

Bootstrap のコンテナー クラスの幅は 1170px で、表示情報には最適ですが、画面サイズに関係なく、フッターの背景をページの端まで拡張したいと考えています。幅を 2000px に設定することを提案するソリューションを見てきましたが、誰かが大きな画面幅のモニターを使用している場合に備えて、よりクリーンなソリューションをお勧めします。また、Bootstrap のコンテナー クラスの幅をオーバーライドしたくありません。要素の配置が台無しになるからです。

CSS で背景に div を含む過去にこぼれるように指示する方法はありますか?

ここにJSFiddleがあります

ブートストラップのクラス.footerによってバインドされている現在のクラスは次のとおりです。.container

.footer {
    float: left;
    background: #000;
    margin-top:40px;
    width: 100% !important;
    height: 500px;
    position: absolute;
}
4

2 に答える 2

4

少しデザインを変えて

    <!-- .footer's old home -->
    </container>
    <footer>
        <container>Your previous footer kids</container>
    </footer>
</body>

.containerはクラスなので、複数回出現する可能性があります。

実際、それが Bootstrap が .container を最初から id ではなくクラスにした理由だと思います。

フィドル: http://jsfiddle.net/V7Yyf/

ところで-.container特定のビューポートサイズで「自動」の幅があります（参照：bootstrap-responsive.cssの825行目）

于 2013-03-14T12:13:59.363 に答える
1

これを試して：

.footer {
    float: left;
    background: #000;
    margin-top:40px;
    width: 100% !important;
    height: 500px;
    margin-left: -83px;
    position: absolute;
}

この!importantオプションは基本的に、それを上書きする可能性のある他のプロパティよりも優先されます。

また、bootstrap.css のコンテナ クラスを編集します。

.container {
  margin-right: auto;
  margin-left: auto;
  *zoom: 1;
  display: block;
  width: 100% !important;
  position:absolute;
}
于 2013-03-14T08:54:11.747 に答える