Question

我使用Twitter引导来实现我的项目界面，但是我遇到了背景问题，直到现在我无法解决它，

＆＃34;我如何将bootstrap背景容器分为2种颜色＆＃34; ，我的意思是每6个cols有不同的颜色，Fluid-background容器将是左右列的相同下面的图片描述了我想做的事情

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

所以希望得到一些提示

谢谢

Answer 1

这可能会给你一个开始。

我在.bg-outer周围添加了.container，并为其指定了包含线性渐变的背景。线性渐变从左到右，两种颜色的起点和终点都设置为50％，使其颜色突然变化。一个问题可能是这种颜色变化发生在排水沟中间，如果您希望通过在7日background-color添加.col-xs-1来解决这个问题。

对于列内容的背景，我在每个div中添加了col-xs-1，div使用类background-color获得.bg-left或.bg-right。如果您要在background-color上直接添加col-xs-1，它也会为网格装订线提供此颜色，因为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种颜色

1 个答案: