Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to solve the stacking problem encountered in the vertical spacing of Bootstrap columns". In the daily operation, I believe that many people have doubts about how to solve the stacking problem encountered in the vertical spacing of Bootstrap columns. The editor consulted all kinds of data and sorted out simple and easy-to-use operation methods. I hope it will be helpful for everyone to answer the "how to solve the stacking problem encountered in the vertical spacing of Bootstrap columns". Next, please follow the editor to study!

If the tablet or phone views the layout, all columns are stacked, but each column may directly touch the previous column.

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

[class*= "col-"] {

Margin-bottom:15px

}

This applies in some cases, but adds an extra, unnecessary margin when it is not needed.

The solution

To solve this problem, we can create a new css class that applies the top margin to the column when stacking:

.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

}

}

The row-grid class applies the top margin to the column with the previous column, and the media query then removes the top margin when it is not needed.

In the related instructions, if you want to add vertical spacing between rows, add this line to the CSS:

.row-grid+.row-grid {

Margin-top:15px

}

Usage

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

At this point, the study on "how to solve the stacking problem in the vertical spacing of Bootstrap columns" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.