本篇文章給大家介紹的內(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列布。

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

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

解決的方法

為了解決這個問題，我們可以創(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類添加到要啟用垂直列間距的行中即可。

<div class="row row-grid">
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
</div>

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

分享文章：Bootstrap列的垂直間距遇到堆疊問題應(yīng)該如何解決
當(dāng)前鏈接：http://jinyejixie.com/article22/ppejjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、外貿(mào)建站、網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、用戶體驗、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)