欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > css3案例分享 >

Bootstrap列的垂直间距遇到堆叠问题的解决方法

发布时间:2019-05-24  编辑:杨雨个人博客网站   点击:   

本篇文章给大家介绍的内容是关于Bootstrap列的垂直间距遇到堆叠问题的解决方法,有需要的朋友可以参考一下。

遇到的问题

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

<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>
本文地址:http://itbyc.com/web/css3/20172.html
转载请注明出处。
分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1