Differences and usage between col-xs-*, col-sm-*, col-md-*, col-lg-* in Bootstrap fence layout

foreword

        For some students who are beginners in boostrap, they must be as stupid as me and don’t understand how to use col-××-*. I was confused at first, but after reading this article, After understanding the difference between them, I sorted them out for everyone to learn together.

Summary: The meaning of col-xs-*, col-sm-*, col-md-*, col-lg-* in bootstrap fence system css:

.col-xs-* Ultra small screen phones (<768px)

.col-sm-* Small screen tablet (≥768px)

.col-md-* Medium screen desktop monitors (≥992px)

.col-lg-* Large screen large desktop display (≥1200px)

Keyword Explanation

1. col-column: column;

2. xs-maxsmall: super small; sm-small: small; md-medium: medium; lg-large: large;

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), use when ultra-small screen;

     .col-sm-*Small screen tablet (≥768px), used when small screen;

     .col-md-* medium screen desktop display (≥992px) (grid parameter), used when medium screen;

     .col-lg-*Large screen large desktop display (≥1200px), used when large screen.

5. No matter what kind of screen you are on, the grid system will automatically divide each row into 12 columns col-xs-*, col-sm-* and col-md-*. 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.

Case description

1. Single case analysis

<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 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: There are 12 columns in each row, divided into 2 divs, the first div occupies 4 columns, and the second div 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>
</div>

2. Mixed use case analysis:

HTML code:

<div class="col-xs-12 col-sm-9 col-md-6 col-lg-3">测试</div>

When the screen size:

less than 768px, use the style corresponding to col-xs-12;

when it is between 768px and 992px, use the style corresponding to col-sm-9;

when it is between 992px and 1200px, use The style corresponding to the col-md-6 class;

When the size is greater than 1200px, use the style corresponding to the col-lg-3 class;

-----------------------------------------------end-------------------------------------------------

Reference article: http://www.cnblogs.com/sdusrz/p/7170564.html