How to solve the stacking problem of vertical spacing in Bootstrap columns

This article introduces to you the solution to the stacking problem of vertical spacing in Bootstrap columns. Friends in need can refer to it.

Issues Encountered

While using Twitter Bootstrap, I ran into some vertical spacing issues when the bootstrap's columns started to stack. For example, let's look at a 3-column layout for a medium-sized screen. (Recommended tutorial: Bootstrap Tutorial)

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

If this layout is viewed on a tablet or phone, all columns will be stacked, but each column may directly touch the previous column.

A simple solution is to add a bottom margin to each column:

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

This works for some cases, but adds extra, unnecessary margin when not needed .

Solution

To solve this problem, we can create a new css class that applies top margin to columns when stacked:

.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 class applies top margin to column with previous column, media query then removes top margin when not needed.

On a related note, if you want to add vertical spacing between rows, add this line to your CSS:

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

Usage

Just add the row-grid class to the rows where you want to enable vertical column spacing.

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

The above is the detailed content of How to solve the stacking problem of vertical spacing in Bootstrap columns. For more information, please follow other related articles on the PHP Chinese website!