如何将 bootstrap 背景容器分成 2 种颜色

Question

我正在使用 Twitter bootstrap 来实现我的项目界面，但我遇到了一个后台问题，直到现在我都无法解决它，

" How do i devide bootstrap background container into 2 colors "，我的意思是每 6 列有不同的颜色，流体背景容器将与左右列相同下图描述了我想做什么

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

所以希望得到一些提示

谢谢

Answer 1

这可能会给你一个开始。

我在 .container 周围添加了一个 .bg-outer 并给它一个包含线性渐变的背景。线性渐变从左到右，两种颜色的起点和终点都设置为 50%，使其颜色突然变化。一个问题可能是这种颜色变化发生在排水沟的中间，如果您愿意，可以通过在第 7 .col-xs-1.

添加一个 background-color 来解决这个问题

对于列内容的背景，我在每个 col-xs-1 中添加了一个 div，div 使用 [=37= 得到一个 background-color ] .bg-left 或 .bg-right。如果您直接在 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>

如何将 bootstrap 背景容器分成 2 种颜色

How do i devide bootstrap background container into 2 colors

css

twitter-bootstrap

background-color