css - 在 1 行中 Bootstrap 2 个背景颜色

Question

我希望这个问题是有道理的。我不知道该怎么做。我目前正在开发一个网站，其中页面的一部分将有两种不同的背景颜色(1 种用于左侧，1 种用于右侧)。这就是我的目标:

<div class="gray-bg">
    <div class="span6">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, consequuntur illo impedit libero nam voluptatem sed facere earum quam ullam velit iste necessitatibus aperiam dolor id. Quod rerum est vel.</p>
    </div>
</div>
<div class="white-bg">
    <div class="span6">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci quam sapiente ut iusto neque. Obcaecati, molestiae, consequuntur qui blanditiis libero odio fuga eum iusto illo eaque inventore ipsa eligendi ipsam!</p>
    </div>
</div>

我已经尝试了几种变体，将行放在跨度下，将容器和子行放在跨度中，但我无法创建我想要的效果。任何人都可以帮忙吗？谢谢!

更新:这是我正在尝试做的事情的 JSFiddle。它可以工作，但它不在容器中以正确分隔行。当我把它放入容器中时，左边的蓝色并没有一直延伸。

http://jsfiddle.net/BVmUL/622/

Answer 1

尝试以下操作:Bootply demo

<div class="container">
<div class="row">
    <div class="span6">
      <div class="gray-bg">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, consequuntur illo impedit libero nam voluptatem sed facere earum quam ullam velit iste necessitatibus aperiam dolor id. Quod rerum est vel.</p>
    </div>
</div>
    <div class="span6">
      <div class="white-bg">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci quam sapiente ut iusto neque. Obcaecati, molestiae, consequuntur qui blanditiis libero odio fuga eum iusto illo eaque inventore ipsa eligendi ipsam!</p>
    </div>
</div>
</div>
</div>

CSS:

.gray-bg {
  background-color:red;
 }

.white-bg {
  background-color:green;
 }