The meaning of col-xs-*, col-sm-*, col-md-* in the bootstrap fence system CSS is to automatically select the corresponding class style according to the width of the display screen:
.col-xs- Ultra-small screen mobile phone (<768px) (recommended learning: Bootstrap video tutorial)
.col-sm- Small screen tablet (≥768px)
.col-md- Medium screen desktop monitor (≥992px)
.col-lg- Large screen large desktop monitor (≥1200px)
First of all, explain:
1, col-column;
2. xs-maxsmall, extra small; sm-small, small; md-medium, medium; lg-large, large;
3. -* means occupying columns, that is, automatically occupying each row 12-column grid system ratio;
4, col-xs-*ultra small screen mobile phone (<768px),
.col-sm-*small screen tablet ( ≥768px),
.col-md-*Medium screen desktop monitor (≥992px) (grid parameter).
5. No matter where On this screen, the grid system will automatically divide each row into 12 columns. The parameters followed by col-xs-* and col-sm-* and col-md-* represent the number of columns occupied by each div in the current screen. .
For example
6. Inversely, if we want to display 3 divs side by side on the small screen (12/3 = each occupies 4 columns), then col-xs-4; display 6 on the large screen div (12/6 = each occupies 2 columns), then col-md-2; in this way we can control the layout we want.
For more technical articles related to Bootstrap, please visit the Bootstrap Tutorial column to learn!
The above is the detailed content of bootstrap col-sm col-md difference. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
