Bootstrap列的垂直间距(示例)

・2 分钟阅读

问题

在使用Twitter Bootstrap时,当Bootstrap开始堆叠时,我遇到一些垂直间距问题,例如让我们看看中型屏幕的3列布局。


<div class="row">
 <div class="col-md-4"></div>
 <div class="col-md-4"></div>
 <div class="col-md-4"></div>
</div>

如果平板电脑或手机查看了该布局,则所有列都将堆叠,而且,每列可能会直接触及上一列。

一个简单的解决方案是向每一列添加一个底部边距:


[class*="col-"] {
 margin-bottom: 15px;
}

这种情况适用于某些情况,但是,在不需要时增加额外的不必要的边距。

解决方案

为了解决这个问题,我们可以创建一个新的css类,它们在堆叠时将顶边距应用于列:


.row.row-grid [class*="col-"] + [class*="col-"] {
 margin-top: 15px;
}

@media (min-width: 1200px) {
 .row.row-grid [class*="col-lg-"] + [class*="col-lg-"] {
 margin-top: 0;
 }
}
@media (min-width: 992px) {
 .row.row-grid [class*="col-md-"] + [class*="col-md-"] {
 margin-top: 0;
 }
}
@media (min-width: 768px) {
 .row.row-grid [class*="col-sm-"] + [class*="col-sm-"] {
 margin-top: 0;
 }
}

row-grid类将上边距应用到有上一列的列,当不需要时,媒体查询将删除上边距。

在相关注释中,如果要在行之间添加垂直间距,请将此行添加到css :


.row-grid + .row-grid {
 margin-top: 15px;
}

用法

只需将row-grid类添加到要启用垂直列间距的行。


<div class="row row-grid">
 <div class="col-md-4"></div>
 <div class="col-md-4"></div>
 <div class="col-md-4"></div>
</div>
讨论
学以致用 profile image