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>

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

Answer 2

由于Bootstrap系统中有12列，您可能会发现为每个div提供一个“class-md-3”类很有帮助，然后在每个div中使用填充在这三个内容周围创建空间列。

例如，

<div class="col-sm-3 add-padding">your content here </div>

然后，在你的css文件中，

.add-padding {
  padding: 10px;
}

（我添加了类“add-padding”以避免更改所有“col-sm-3”div。）

引导程序3中列之间的间距相同

2 个答案: