css – 具有全宽背景的Boostrap .container,在中间分开？

有没有办法使用.container然后在里面有一个拆分2列布局,其中列具有不同的背景颜色,并一直到达页面的左右两侧？

以下正确居中并拆分为两列,但每个列的背景也会裁剪为容器的宽度.

<div class="container">
  <div class="col-sm-6">
    <p>Left content goes here.</p>
  </div>
  <div class="col-sm-6">
    <p>Right content goes here.</p>
  </div>
</div>

图像比文字效果更好：

HTML

<div class="container-holder">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="gray-box">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam beatae quod quaerat nostrum ullam animi ea repellendus incidunt quia explicabo consequuntur pariatur obcaecati aliquid magnam laudantium ratione dicta eius id?
                    </p>
                </div>
            </div>
            <div class="col-md-6">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam beatae quod quaerat nostrum ullam animi ea repellendus incidunt quia explicabo consequuntur pariatur obcaecati aliquid magnam laudantium ratione dicta eius id?
                </p>
                 <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam beatae quod quaerat nostrum ullam animi ea repellendus incidunt quia explicabo consequuntur pariatur obcaecati aliquid magnam laudantium ratione dicta eius id?
                </p>
            </div>
        </div>
    </div>
</div>

CSS

.container-holder{
    overflow: hidden;
    background: white;
}
.gray-box{
    background: gray;
    padding: 0 15px 9999px 9999px;
    margin: 0 -15px -9999px -9999px;
}

jsfiddle DEMO