我在这里遇到了一个问题。我已经连续在 8 列中的每一列中使用了背景图像,现在我需要在它们之间添加空格。我在这里创建了两个类,它们应该可以工作,但出了点问题。另外,我在过去的项目中使用过这个,行元素中使用了薄排水沟和华夫饼,但现在华夫饼仅适用于 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;
}
将margin-bottom
添加到列中。
.thin-gutters > .col,
.thin-gutters > [class*="col-"] {
padding-right: 2px;
padding-left: 2px;
margin-bottom: 10px;
}
http://www.codeply.com/go/N9snQAKA4K
--
更新引导程序 4 测试版
现在,间距实用程序可用于边距和填充。例如
mb-2
2 个间距单位的边距底部。