Bootstrap列的垂直间距遇到堆叠问题如何解决

这篇文章主要介绍“Bootstrap列的垂直间距遇到堆叠问题如何解决”，在日常操作中，相信很多人在Bootstrap列的垂直间距遇到堆叠问题如何解决问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Bootstrap列的垂直间距遇到堆叠问题如何解决”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

　　<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>

到此，关于“Bootstrap列的垂直间距遇到堆叠问题如何解决”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！