我在这里遇到了一个问题。我已经在我的8列中的每一列中使用了背景图像,现在我需要在它们之间添加空白。我在这里创建了两个类,它们应该可以工作,但是有些东西是错误的。另外,我在过去的项目中使用了这个,并且在row元素中使用了薄条和华夫饼干,但现在华夫饼干只适用于col的子元素。
这是我的代码......
<div id="products">
<div class="container-fluid">
<div class="row thin-gutters text-center">
<div class="col-12 col-md-6 col-xl-3 product-images waffle ceramic-tile">
<h2 class="product-title"><a href="#">Ceramic Tile</a></h2>
</div>
<div class="col-12 col-md-6 col-xl-3 product-images waffle carpet">
<h2 class="product-title"><a href="#"> carpet</a></h2>
</div>
<div class="col-12 col-md-6 col-xl-3 product-images waffle hardwood">
<h2 class="product-title"><a href="#">hardwood</a></h2>
</div>
<div class="col-12 col-md-6 col-xl-3 product-images waffle countertops">
<h2 class="product-title"><a href="#">countertops</a></h2>
</div>
<div class="col-12 col-md-6 col-xl-3 product-images waffle laminate">
<h2 class="product-title"><a href="#">laminate</a></h2>
</div>
<div class="col-12 col-md-6 col-xl-3 product-images waffle stone-tile">
<h2 class="product-title"><a href="#">stone tile</a></h2>
</div>
<div class="col-12 col-md-6 col-xl-3 product-images waffle vinyl">
<h2 class="product-title"><a href="#">vinyl</a></h2>
</div>
<div class="col-12 col-md-6 col-xl-3 product-images waffle area-rugs">
<h2 class="product-title"><a href="#">area rugs</a></h2>
</div>
</div>
</div>
和我的css ......
.thin-gutters {
margin-right: -2px;
margin-left: -2px;
}
@media (min-width: 576px) {
.thin-gutters {
margin-right: -2px;
margin-left: -2px;
}
}
@media (min-width: 768px) {
.thin-gutters {
margin-right: -2px;
margin-left: -2px;
}
}
@media (min-width: 992px) {
.thin-gutters {
margin-right: -2px;
margin-left: -2px;
}
}
@media (min-width: 1200px) {
.thin-gutters {
margin-right: -2px;
margin-left: -2px;
}
}
.thin-gutters > .col,
.thin-gutters > [class*="col-"] {
padding-right: 2px;
padding-left: 2px;
}
.waffle {
margin-bottom: 4px;
}
.waffle > .col,
.waffle > [class*="col-"] {
padding-bottom: 4px;
}
答案 0 :(得分:1)
将margin-bottom
添加到列..
.thin-gutters > .col,
.thin-gutters > [class*="col-"] {
padding-right: 2px;
padding-left: 2px;
margin-bottom: 10px;
}
http://www.codeply.com/go/N9snQAKA4K
-
现在spacing utils可用于边距和填充。例如,
mb-2
表示2个间距单位的保证金底部。