Bootstrap列的垂直間距遇到堆疊問題的解決方法-css教學-PHP中文網

Bootstrap列的垂直間距遇到堆疊問題的解決方法

不言

發布： 2018-11-06 13:46:55

原創

3536 人瀏覽過

這篇文章要跟大家介紹的內容是關於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>

登入後複製

以上是Bootstrap列的垂直間距遇到堆疊問題的解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！