BOOTSTRAP3 layout--How to handle displaying 5 columns

Bootstrap's streaming grid system is automatically divided into up to 12 columns as the screen or viewport (viewport) size increases. However, in the actual requirements may not be divisible by 12 of the number of columns (such as a line divided into 5 columns), need some other solution.

Through the investigation of relevant data, two kinds of schemes are listed (five columns for example):

1. Modify Bootstrap Source code

2. Custom five-column CSS classes

Modify Bootstrap source code

According to the official documentation, Bootstrap can be compiled from the Less/sass source code, bootstrap contains a set of less variables and mixin to help you generate a simple, semantic layout. Variables are used to define the number of columns, the width of the slot (gutter), the media query threshold (to determine the appropriate let column float). We use these variables to generate a predefined raster class, as follows:

@grid-columns:12; @grid-gutter-width:30px; @grid-float-breakpoint:768px;

By modifying the variable @grid-columns, you can redefine the number of predefined columns of a raster system to meet the specific layout needs of your application, but this approach also has a lot of disadvantages:

1. There will be serious damage to the layout code already in the application, the original use of the code based on the 12 column should be adjusted;

2. Because the default column values have been modified, programmers need to be careful when writing code, and the compatibility and extensibility of the system are a big challenge.

Reference Documentation:

http://v3.bootcss.com/css/#grid-less

Custom five-column CSS classes

This method is relatively simple, customize a set of CSS classes, as far as possible and bootstrap style consistency.

. col-xs-5ths,. Col-sm-5ths,. Col-md-5ths,. col-lg-5ths {position:relative;min-height:1px;padding-right:10px; padding-left:10px;} @media (min-width:768px) {. col-sm-5ths {width:20%;float:left;}} @media (min-width:992px) {. col-md-5ths {width:20%;float:left;}} @media (min-width:1200px) {. col-lg-5ths {width:20%;float:left;}}

This article is from the "Yan" blog, make sure to keep this source http://jiaoyan.blog.51cto.com/8781601/1622251

BOOTSTRAP3 layout--How to handle displaying 5 columns