我正在使用Twitter Bootstrap来实现我的项目界面,但我遇到了一个背景问题,一直无法解决。
“如何将Bootstrap背景容器分为两种颜色”,我的意思是每6列有不同的颜色,Fluid背景容器左右列相同。下面的图片描述了我想做的事情。
http://i.stack.imgur.com/LN38U.png
希望能得到一些提示
谢谢
我正在使用Twitter Bootstrap来实现我的项目界面,但我遇到了一个背景问题,一直无法解决。
“如何将Bootstrap背景容器分为两种颜色”,我的意思是每6列有不同的颜色,Fluid背景容器左右列相同。下面的图片描述了我想做的事情。
http://i.stack.imgur.com/LN38U.png
希望能得到一些提示
谢谢
这可能会让你有个开端。
我在.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>