Bootstrap列的垂直間距遇到堆疊問題應該如何解決

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

遇到的問題

在使用Twitter Bootstrap時，當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類，它在堆積時將頂部邊距應用于列：

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

在相關的說明中，如果要在行之間添加垂直間距，則將此行添加到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列的垂直間距遇到堆疊問題應該如何解決的詳細內(nèi)容，更多請關注億速云其它相關文章！