Col – md – number:

Xs: size of a mobile phone device

Sm: Tablet size

Md: laptop device size

Lg: Desktop PC device size

Number: Represents the number of cells in a row of 12 columns.

For example, col-LG-3 represents 3 columns in a row of 12 columns (col-LG-1).

The container size (width:1170) takes up three columns when the device window is turned up to the browser’s maximum size.



The container size (width:970) takes up 1 column when the device window is scaled to the browser’s maximum size. That’s because when the container size changes,In the < 970 pxThe LG parameter will no longer apply to the container’s orchestration, so a row in the range of SM will occupy a column.

970, col-LG-3 will become equivalent to being at 1170, col-LG-1



If it’s 970, col-LG-1, it’s going to look like this, it’s going to look like 970, col-Lg-3.

If a row is displayed on a device with no range, the corresponding result will only be displayed if the grid parameter indication is used



Summary: So you can use xs,sm, MD, L in a row to adjust the results on different devices, and this time you must use grid parameters. For example, one row with 3 columns is displayed under MD and one row with 4 columns is displayed under SM

<div cLass="col-md-3 col-sm-4"> Raster parameters </div>Copy the code

It also indicates that 3 columns (out of 12) are occupied under MD and 4 columns (out of 12) are occupied under SM.

Such as:

<div cLass="col-md-3"> Raster parameters </div>Copy the code

A row has 12 columns, and an MD row will display a column occupying 3 cells



The above implementation must be implemented inside a container that contains rows.

Requirement: If you compare a row (12 columns) to 12 cells.

If the screen is large and displays 6 columns in a row, each column will occupy 2 cells. If the screen is medium and displays 4 columns in a row, each column will occupy 3 cells. Col-md-3 If the screen is small and displays 3 columns in a row, each column will occupy 4 cells A row showing 2 columns means that each column will occupy 6 col-XS-6 cells

Col-lg-2 = col-LG-2 = col-LG-2 = col-LG-2 = col-LG-2 There are 4 columns under MD, so the first 4 columns have COL-MD-3. There are 3 columns under SM, so the first 3 columns have COL-SM-4. There are 2 columns under XS, so the first 2 columns have COL-XS-6

Col – LG/MD /sm/xs- Number: Number indicates the number of columns in a row of 12.

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8"> <title>Title</title> <! -- Mobile device preferred --> <meta name="viewport" content="width=device-width, initial-scale=1"> <! --> <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> <! -- Bootstrap. js must be imported in jquery. js before importing bootstrap.js --> <script type="text/javascript" src="bootstrap/js/jquery.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
</head>
<body>
    <div class="container"> <! -- Requirement: If it is a large screen with one line display6The column col - lg -2If it is medium screen one line display4The column col - md -3If it's a small screen, one line3The column col - sm -4If it is displayed in a row on a super small screen2The column col - xs -6-- > <! Use a raster system with raster parameters for a responsive layout --> <divclass="row">
            <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
                <img src="images/1.jpg" class="img-responsive">
            </div>
            <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
                <img src="images/1.jpg" class="img-responsive">
            </div>
            <div class="col-lg-2 col-md-3 col-sm-4">
                <img src="images/1.jpg" class="img-responsive">
            </div>
            <div class="col-lg-2 col-md-3">
                <img src="images/1.jpg" class="img-responsive">
            </div>
            <div class="col-lg-2">
                <img src="images/1.jpg" class="img-responsive">
            </div>
            <div class="col-lg-2">
                <img src="images/1.jpg" class="img-responsive">
            </div>
        </div>
    </div>
</body>
</html>
Copy the code

lg:



md:



sm:



xs: