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;
 }

bootstrap 2背景颜色在一行

1 个答案: