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

創(chuàng)新互聯(lián)是一家專業(yè)提供三沙企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站制作、做網(wǎng)站、H5開發(fā)、小程序制作等業(yè)務(wù)。10年已為三沙眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進行中。

遇到的問題

在使用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)網(wǎng)站制作公司其它相關(guān)文章！

當(dāng)前題目：Bootstrap列的垂直間距遇到堆疊問題應(yīng)該如何解決-創(chuàng)新互聯(lián)
路徑分享：http://weahome.cn/article/ccjoeh.html