<分区>
我一直遇到这个问题,我总是使用 webkit-columns
解决它。但我想知道使用 Bootstrap 是否有更好的方法。
网格内有 4 个框。
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
</div>
这给了我 4 个框,但最后一个框的边距比其他框多。我希望它们都具有相同的边距,但像图像一样在 Angular 上为 0:
---编辑澄清---
为了澄清我的问题,我要添加这个 jsfiddle你看到蓝框了吗?我想让红色框以蓝色框开始和结束,你能做到吗?不向蓝色框添加边距,蓝色框必须为 100%,另一个框必须与该框的第一个和最后一个对齐
在这里我做我想做的:Jsfiddle但我在这里使用 -webkit-column 只是为了向您展示,如果您可以使用 bootstrap 做到这一点,那就太好了。
最佳答案
我要分享这个 Demo我创建。我希望它能带你到某个地方。
HTML
<div class="container">
<div class="row">
<div class="col-sm-3 custom-col">
<div class="child-div">
</div>
</div>
<div class="col-sm-3 custom-col">
<div class="child-div">
</div>
</div>
<div class="col-sm-3 custom-col">
<div class="child-div">
</div>
</div>
<div class="col-sm-3 custom-col">
<div class="child-div">
</div>
</div>
</div>
</div>
CSS
.col-sm-3.custom-col{
height:250px;
/* outline: 1px solid green; */
padding: 5px;
}
.child-div{
height:100%;
width:100%;
background-color:red;
}
更新
我更新了 fiddle 。 HERE
关于html - Bootstrap Col vs Webkit 专栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32126571/