如何将Bootstrap背景容器分为两种颜色

Question

我正在使用Twitter Bootstrap来实现我的项目界面，但我遇到了一个背景问题，一直无法解决。

“如何将Bootstrap背景容器分为两种颜色”，我的意思是每6列有不同的颜色，Fluid背景容器左右列相同。下面的图片描述了我想做的事情。

http://i.stack.imgur.com/LN38U.png

希望能得到一些提示

谢谢

- user4417173

Answer 1

这可能会让你有个开端。

我在.container周围添加了一个.bg-outer，并给它一个包含线性渐变的背景。线性渐变从左到右，起点和终点都设置为50％，使其成为突然的颜色变化。一个问题可能是，这种颜色变化发生在间距中间，如果需要的话，可以在第7个.col-xs-1上添加background-color来解决这个问题。

对于列内容的背景，我在每个.col-xs-1内添加了一个div，该div使用.bg-left或.bg-right类获取background-color。如果你直接在col-xs-1上添加background-color，它也会给格子留下这种颜色，因为Bootstrap使用填充来创建网格留白。

.bg-outer {
  background: linear-gradient(to right, #6B6FFF 50%, #2C00C8 50%);
}

.bg-left {
  background-color: #913EDD;
}

.bg-right {
  background-color: #3900AB;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="bg-outer">
  <div class="container">
    <div class="row">
      <div class="col-xs-1"><div class="bg-left">col</div></div>
      <div class="col-xs-1"><div class="bg-left">col</div></div>
      <div class="col-xs-1"><div class="bg-left">col</div></div>
      <div class="col-xs-1"><div class="bg-left">col</div></div>
      <div class="col-xs-1"><div class="bg-left">col</div></div>
      <div class="col-xs-1"><div class="bg-left">col</div></div>
      <div class="col-xs-1"><div class="bg-right">col</div></div>
      <div class="col-xs-1"><div class="bg-right">col</div></div>
      <div class="col-xs-1"><div class="bg-right">col</div></div>
      <div class="col-xs-1"><div class="bg-right">col</div></div>
      <div class="col-xs-1"><div class="bg-right">col</div></div>
      <div class="col-xs-1"><div class="bg-right">col</div></div>      
    </div>
  </div>
</div>

- ckuijjer