4

Bootstrap 的容器类的宽度为 1170 像素，非常适合显示信息，但我希望我的页脚背景延伸到页面边缘，无论屏幕大小如何。我已经看到建议我将宽度设置为 2000 像素的解决方案，但我更喜欢更干净的解决方案，以防有人使用具有大屏幕宽度的显示器。我也不想覆盖 Bootstrap 的容器类的宽度，因为这会弄乱我的元素的定位。

CSS中有没有办法告诉背景溢出它包含的div？

这是一个JSFiddle

这是我当前.footer的课程，受 Bootstrap.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 回答