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

Question

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

我有段落,我已经放入一个container,以便它们在页面调整大小时保持居中.但是,我希望某些行具有彩色背景,尽可能向两侧延伸,如图所示.我不确定这是否可行？

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

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

这是一个JSFiddle开始,包括一个橙色框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