将引导容器背景扩展到页面边缘

Question

我正在设计一个基于Bootstrap 3构建的页面，我想尝试重新创建以下设计：

我已将段落添加到container中，以便在调整页面大小时保持页面居中。但是，我希望某些行具有彩色背景，尽可能向两侧延伸，如图所示。我不确定这是否可行？

我尝试过的一种方法是切换到这些行的container-fluid类，这些行会进入屏幕边缘。这种工作，但我不确定是否可以让内部文本与其他段落保持内联，因为页面已调整大小？实际上，对于所有文本块，文本应始终在左侧和右侧具有一致的边距。

我认为我不需要在边距区域内容，所以如果一个解决方案只涉及使用标准容器来保存内容，另一种方法是将背景扩展到一边，那可能会有效。

Here is a JSFiddle to start off with，包括container-fluid中的一个橙色框，以演示该方法。

Answer 1

我不确定这是不是最好的＆＃39;解决方案，但它仍然是一个解决方案。

• 为每个彩色框（:before）
创建一个伪元素
• 绝对定位（相对于彩色框 - Bootstrap已设置位置：相对于col-*-*）。
• 将顶部和底部值设置为0，因此它始终是正确的高度
• 设置背景颜色以匹配框
• 给它宽的宽度以确保它总是在宽屏幕上覆盖排水沟（.container的侧面）
• 对于左侧框，设置left: -[width of psuedo element]，右侧框设置right: -[width of pseudo element
• 最后，您需要将页面容器设置为overflow: hidden。

<强> HTML

<div id="page">
    <div class="container">
        ...
    </div>
</div>

<强> CSS

#page {
    overflow: hidden;
}    

.box-left:before,
.box-right:before {
    content: '';
    display: block;
    position: absolute;
    width: 999em;
    top: 0;
    bottom: 0;
}

.box-left:before {
    left: -999em;
    background: orange;
}

.box-right:before {
    right: -999em;
    background: lightblue;
}

<强> DEMO