从品牌网站建设到网络营销策划,从策略到执行的一站式服务
本篇文章给大家介绍的内容是关于Bootstrap列的垂直间距遇到堆叠问题应该如何解决,有需要的朋友可以参考一下。
遇到的问题
在使用Twitter Bootstrap时,当bootstrap的列开始堆叠时,我遇到了一些垂直间距问题。例如,让我们看看中型局屏幕的3列布。
如果平板电脑或手机查看了该布局,则会堆叠所有列,但每列可能会直接触及上一列。
一个简单的解决方案是为每列添加一个底部边距:
[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类添加到要启用垂直列间距的行中即可。
以上就是Bootstrap列的垂直间距遇到堆叠问题应该如何解决的详细内容,更多请关注创新互联网站制作公司其它相关文章!
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图