Home  >  Article  >  Web Front-end  >  About the problem of bootstrap 3 displaying 5 columns_html/css_WEB-ITnose

About the problem of bootstrap 3 displaying 5 columns_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:05:351049browse

Bootstrap is a good thing. Students who are not very familiar with CSS can use it to quickly build a website that is not ugly.

But bootstrap is a 12-grid system, and it is troublesome to display 5 columns. I happened to have this need today, so I did a little research and succeeded. The specific method is:

Load the bootstrap css in the head ac8534d199b637a6f3b16f30b6c77bf8 After that

add a few more css classes

 1 <style> 2 .col-lg-2dot4 { 3 position: relative; 4 min-height: 1px; 5 padding-right: 15px; 6 padding-left: 15px; 7 } 8 @media (min-width: 1200px) { 9 .col-lg-2dot4 {10 float: left;11 }12 .col-lg-2dot4 {13 width: 20%;14 }15 .col-lg-pull-2dot4 {16 right: 20%;17 }18 .col-lg-push-2dot4 {19 left: 20%;20 }21 .col-lg-offset-2dot4 {22 margin-left: 20%;23 }24 }25 </style>

and then you need Apply this class where 5 columns are displayed

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn