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

Question

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

我将段落放入container，以便它们在调整大小时保持在页面的中心。但是，我希望某些行有一个彩色背景，它们一直延伸到两侧，如图所示。我不确定这是否可能？

我尝试过的一种方法是为这些行切换到container-fluid 类，该类会到达屏幕边缘。这种作品，但我不确定是否可以在调整页面大小时让里面的文本与其他段落保持一致？确实，对于所有文本块，文本的左右边距应该始终保持一致。

我认为我不需要边缘区域中的内容，因此，如果解决方案仅涉及使用标准容器来保存内容，以及另一种将背景延伸到侧面的方法，那可能会奏效。

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

Answer 1

我不确定这是否是“最佳”解决方案，但它仍然是一个解决方案。

• 为每个彩色框创建一个伪元素 (: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