Summary: The meaning of col-xs-*, col-sm-*, col-md-* in bootstrap fence system css: .col-xs-* ultra-small screen mobile phone (768px), .col-sm-* small screen Tablet (≥768px), .col-md-* medium screen desktop monitor
First explain:
1. col-column;
2. xs-maxsmall, ultra-small; sm-small, small; md-medium, medium;
3. -* means occupying columns, that is, occupying the ratio of automatic 12-column grid system per row;
4, col-xs-* ultra-small screen mobile phone (<768px),
.col-sm-*small screen tablet (≥768px),
.col-md-* Medium screen desktop monitors (≥992px) (raster parameter).
5. No matter what kind of screen you are on, the grid system will automatically divide each row into 12 columns. The parameters followed by col-xs-*, col-sm-* and col-md-* indicate that each row is displayed on the current screen . The number of columns occupied by the div. For example <div class="col-xs-6 col-md-3"> the position of this div on the screen is: .col-xs-6 occupies 6 columns in a super small screen, which is half of the screen (12/ 6 columns = 2 divs), .col-md-3 occupies 3 columns or 1/4 (12/3 columns = 4 divs) in a single screen.
6. Reverse, if we want to display 3 divs side by side on a small screen (12/3 = 4 columns each), then col-xs-4; display 6 divs on a large screen (12/6 = 2 columns each), then col-md-2; this way we can control what typesetting we want.
<div class="container">
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col -md-4</div>
<div class="col-md-4">col-md-4</div>
<!-- Description: There are 12 columns in each row, divided into 3 divs, and each div is flat Occupies 4 columns, that is, 3 * 4 columns = 12 columns -->
</div>
<div class="row">
<div class="col-md-4">col-md-4</div>
< div class="col-md-8">col-md-8</div>
<!-- Description: Each row has 12 columns, divided into 2 divs, the first div occupies 4 columns, and the second div is Occupies 8 columns, that is, 4 columns + 8 columns = 12 columns -->
</div>
<div class="row">
<div class="col-md-3">col-md-3</div>
<div class="col-md-6">col-md-6</div>
<div class="col-md-3">col-md-3</div>
<!-- Description: There are 12 columns in each row, divided into 3 divs, each 1, 3 divs occupy 3 columns, and the second div occupies 6 columns, that is, 3 columns + 6 columns + 3 columns = 12 columns -- >
</div>