Question

我目前正在尝试使用bootstraps容器类创建一个居中的容器，然后在它的左侧和右侧有两个独立的div来填充剩余的空白区域。

我尝试了很多东西，现在忙于尝试使用列创建它。但没有运气。

唯一的问题是，容器的最大宽度必须为960px

以及到目前为止的代码：

HTML：

<div>
    <div class="col-md-1 pull-left" style="background: #000099;">left</div>
    <div class="container" style="background: #002500">contain</div>
    <div class="col-md-1 pull-right" style="background: #005580">right</div>
</div>

任何帮助都非常赞赏。

Answer 1

由于Bootstrap网格有12个列，它看起来更像是这样..

<div>
    <div class="col-md-1" style="background: #000099;">left</div>
    <div class="col-md-10" style="background: #002500">contain</div>
    <div class="col-md-1" style="background: #005580">right</div>
</div>

演示：http://bootply.com/129827

编辑 - 对于960px宽度的容器，您可以添加一个特殊的类，即; container-960喜欢这个..

.container-960 {
    max-width: 960px;
}

我更新了演示：http://bootply.com/129827

Answer 2

如果您只想用颜色（而不是内容）填充容器的左侧和右侧，那么您可以使用彩色边框和一些CSS3计算：

@media (min-width: 768px) {
  .container {
    width: 100%;
    border-left: calc(50vw - 375px) solid red;
    border-right: calc(50vw - 375px) solid green;
    /* this was width: 750px; */
  }
}
@media (min-width: 992px) {
  .container {
    width: 100%;
    border-left: calc(50vw - 485px) solid red;
    border-right: calc(50vw - 485px) solid green;
    /* this was width: 970px; */
  }
}
@media (min-width: 1200px) {
  .container {
    width: 100%;
    border-left: calc(50vw - 585px) solid red;
    border-right: calc(50vw - 585px) solid green;
    /* this was width: 1170px; */
  }
}

这些规则不适用于IE8，较低版本和较旧版本的Chrome存在阻止其工作的错误。如果你是那个人，你应该没问题。

Answer 3

覆盖容器流体。

.container-fluid{
   padding-left:0;
   padding-right:0;
}

Bootstrap 3容器填充左右空间

3 个答案: