获取两个不同的背景颜色，延伸到屏幕边缘

不是这个的重复。

我试图在网页上创build两个不同的背景颜色，扩展到屏幕边缘。 但是列的内容需要保持在引导框的宽度内。

它应该是这样的：

我发现这个答案几乎工作，但内部内容没有正确alignment的盒装宽度，特别是在超过1600像素的大屏幕上。 它基本上结果如下：

下面是我能得到的最接近的代码片段，完全可能是错误的：

<link href="bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container" style="background: bisque;"> <div class="row"> <div class="col-xs-12"> <h1>Normal Boxed Width</h1> </div> </div> </div> <div class="container-fluid"> <div class="row" style="background-color: aquamarine; padding: 0"> <div> <div class="col-sm-8 col-sm-offset-1"> <h1>Left Panel</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae doloribus unde, distinctio a autem, soluta nulla similique. Vero natus deleniti, culpa consequuntur eveniet beatae laudantium in fuga mollitia sapiente! Assumenda!</p> </div> <div class="col-sm-3 gray-background" style="background-color: rebeccapurple;padding: 10px;color:#fff"> <h1>Right Panel</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, beatae amet est repellendus optio, exercitationem distinctio quasi ut, sapiente, nihil sed libero facere fugiat eaque numquam nulla mollitia suscipit nobis.</p> </div> </div> </div><!-- .row --> </div><!-- .container-fluid --> 

Answer 1

只需在第二个容器周围使用另一个包装DIV …

 <div class="container" style="background: bisque;"> <div class="row"> <div class="col-xs-12"> <h1>Normal Boxed Width</h1> </div> </div> </div> <div style="background-color: aquamarine; padding: 0"> <div class="container"> <div class="row"> <div> <div class="col-sm-9"> <h1>Left Panel</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae doloribus unde, distinctio a autem, soluta nulla similique. Vero natus deleniti, culpa consequuntur eveniet beatae laudantium in fuga mollitia sapiente! Assumenda!</p> </div> <div class="col-sm-3 gray-background" style="background-color: rebeccapurple;padding: 10px;color:#fff"> <h1>Right Panel</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, beatae amet est repellendus optio, exercitationem distinctio quasi ut, sapiente, nihil sed libero facere fugiat eaque numquam nulla mollitia suscipit nobis.</p> </div> </div> </div> <!-- .row --> </div> <!-- .container-fluid --> </div> 

编辑

使用伪造元素，如..

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

http://www.codeply.com/go/YssQ5T7pxq

类似的问题…

Bootstrap容器用颜色填充边