<divclass="row">

 

　　<divclass="col-md-4"></div>

 

　　<divclass="col-md-4"></div>

 

　　<divclass="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类添加到要启用垂直列间距的行中即可。

 

　　<divclass="rowrow-grid">

 

　　<divclass="col-md-4"></div>

 

　　<divclass="col-md-4"></div>

 

　　<divclass="col-md-4"></div>

 

　　</div>