Bootstrap：将2列设置为全宽，但其中的文本与文档容器对齐

Question

我希望我的2列不同大小和背景颜色，但我希望它们一起占用100％宽度，而文本内容保留在普通容器内。有什么想法吗？

链接到jsfiddle：https://jsfiddle.net/de5k2j4n/1/

<div class="container">
 <p>
  Text inside container
 </p>
 <div class="row">
  <div class="col-sm-4">
   <p>
    Text inside container, but my background wants to take all width on left
   </p>
  </div>
  <div class="col-sm-8">
   <p>
    Text inside container, but my background wants to take all width on right
   </p>
 </div>
</div>

我勾画了一幅图片来形象化我的想法：

Answer 1

我在这里回答了类似的问题：

Get Two Columns with different background colours that extend to screen edge

Bootstrap container fill sides with colors

我认为最好的方法是使用全宽＆＃34;包装＆＃34;和伪元素将左/右延伸到两侧，同时保留container。

中的内容

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

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

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