Question

Bootstrap的容器类的宽度为1170px，非常适合显示信息，但我希望我的页脚背景可以扩展到页面的边缘，无论屏幕大小是多少。我已经看到解决方案建议我设置宽度为2000px，但我更喜欢更清洁的解决方案，以防有人使用大屏幕宽度的显示器。我也不想覆盖Bootstrap的容器类'宽度，因为这会弄乱我元素的定位。

CSS中是否有一种方法可以告诉后台溢出它包含div？

这是JSFiddle

这是我当前的.footer类，它被Bootstrap的.container类绑定：

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

Answer 1

稍微改变你的设计

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

.container是一个类，所以它可以有多次出现。

实际上，我敢打赌，这就是为什么Bootstrap让.container成为一个类，而不是一个id。

小提琴：http://jsfiddle.net/V7Yyf/

BTW - .container在某些视口大小时的宽度为“auto”（请参阅：bootstrap-responsive.css的第825行）

Answer 2

试试这个：

.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;
}

将div元素的宽度扩展到Bootstrap的容器类之后

2 个答案: