Bootstrap 3 Container 填充左右空间答案

【问题标题】：Bootstrap 3 Container Fill Left and Right spaceBootstrap 3 Container 填充左右空间
【发布时间】：2016-01-16 22:54:55
【问题描述】：

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

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

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

这是一个JSFIDDLE

到目前为止的代码：

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>

非常感谢任何帮助。

【问题讨论】：

你需要960px的宽度吗？为什么不看看960 css 框架？ 960.gs
不幸的是，已经使用 bootstrap 构建了其中的 90%。这只是最后一个问题。不过谢谢。
您需要 960 像素的宽度还是最大宽度为 960 像素？ ..意味着例如 945px 也可以？

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案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

EDIT - 对于 960px 宽度的容器，您可以添加一个特殊的类，即； container-960 像这样..

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

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

【讨论】：

如果容器的最大宽度必须为 960？
left 和 right 需要填充剩余的空间吗？
@DawidvanderHoven 你是什么意思？就像根本没有左右列一样？或者中间容器的宽度为 960 像素，两侧各有两个 40 像素的列？（所有列的总大小为 1040 像素？）。这个答案非常值得+1，因为它没有更多的要求更改。
哦，所以你想混合固定和流动？
我的意思是应该有一个 960 的容器居中在页面中，然后左右空白区域的其余部分需要是两个单独的 div。如果我说的不清楚，请告诉我，然后我会尝试更好地解释它。

【解决方案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 存在阻止此规则起作用的错误。如果你对此感到满意，那你应该没问题。

【讨论】：

【解决方案3】：

覆盖容器流体。

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

【讨论】：