本篇文章給大家介紹的內(nèi)容是關(guān)于Bootstrap列的垂直間距遇到堆疊問題應(yīng)該如何解決，有需要的朋友可以參考一下。

成都創(chuàng)新互聯(lián)公司專注于醴陵網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供醴陵營銷型網(wǎng)站建設(shè)，醴陵網(wǎng)站制作、醴陵網(wǎng)頁設(shè)計、醴陵網(wǎng)站官網(wǎng)定制、小程序定制開發(fā)服務(wù)，打造醴陵網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供醴陵網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

遇到的問題

在使用Twitter Bootstrap時，當(dāng)bootstrap的列開始堆疊時，我遇到了一些垂直間距問題。例如，讓我們看看中型局屏幕的3列布。

如果平板電腦或手機查看了該布局，則會堆疊所有列，但每列可能會直接觸及上一列。

一個簡單的解決方案是為每列添加一個底部邊距：

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

這適用于某些情況，但在不需要時會增加額外的，不必要的余量。

解決的方法

為了解決這個問題，我們可以創(chuàng)建一個新的css類，它在堆積時將頂部邊距應(yīng)用于列：

.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類將頂部邊距應(yīng)用到具有前一列的列，媒體查詢?nèi)缓笤诓恍枰臅r候刪除頂部邊距。

在相關(guān)的說明中，如果要在行之間添加垂直間距，則將此行添加到CSS：

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

用法

只需將row-grid類添加到要啟用垂直列間距的行中即可。

以上就是Bootstrap列的垂直間距遇到堆疊問題應(yīng)該如何解決的詳細內(nèi)容，更多請關(guān)注創(chuàng)新互聯(lián)其它相關(guān)文章！