css - bootstrap 3 中列之间的间距相同

Question

我想创建这样的东西:http://i.stack.imgur.com/UdUp7.png我尝试用 col-x-offset-x 修复问题，很明显它不起作用。这是我的代码:

<div class="row">
    <div class="col-sm-2 "></div>
    <div class="col-sm-2 col-sm-offset-1"></div>
    <div class="col-sm-2 col-sm-offset-1 pull-left"></div>
    <div class="col-sm-2 pull-left"></div>
</div>

我怎样才能创建像那张照片一样的东西？

Answer 1

我认为你过于复杂了。只需将列数设置为 12，然后添加 css 属性来设置它们的样式即可。我已经在您的代码中添加了一些嵌套的 div，以向您展示图片中的效果。

Demo

<div class="container">
<div class="row">
<div class="col-xs-3"><div class="bggreen"></div></div>
<div class="col-xs-3"><div class="bggreen"></div></div>
<div class="col-xs-3"><div class="bggreen"></div></div>
<div class="col-xs-3"><div class="bggreen"></div></div>
</div></div>

---

.container{    //create a different class name to avoid overwriting bootstrap
padding:20px;
background-color:#f1f1f1;
}

.bggreen{
background-color:green; 
height:100px; 
width:100px;
margin:0 auto;
}
.row{     //create a different class name to avoid overwriting bootstrap
background-color:#ccc;
padding:20px;

}

---

编辑

.parent{
padding:20px;
background-color:#f1f1f1;
}
.child{
background-color:#ccc;
padding:20px 0 20px 0;
margin:0;
}
.child2{
background-color:green; 
height:100px; 
width:100%;
}
.leftcell{
padding-left:0;
} 
.rightcell{
 padding-right:0;
}

---

<div class="container parent">
<div class="row child">
<div class="col-xs-3 leftcell"><div class="child2"></div></div>
<div class="col-xs-3 leftcell"><div class="child2"></div></div>
<div class="col-xs-3 leftcell"><div class="child2"></div></div>
<div class="col-xs-3 leftcell rightcell"><div class="child2"></div></div>
</div></div>

如果这就是您正在寻找的解决方案，请告诉我。