Bootstrap grid layout

1. Implementation principle

　　The grid layout is divided into 12 parts (can be modified) by the size of the container, and then adjust the inner and outer margins, which is similar to the table layout but there are differences.

　　The implementation steps are as follows:

　　(1) The data row.row must be included in the container.container in order to give the verified alignment and padding settings

<div class="container">
        <div class="row"></div>
</div>

　　(2) Columns (.column) can be added to the row (.row), but the sum of the number of columns cannot exceed the total number of equally divided columns, such as 12

<div class="container">
        <div class="row">
            <div class="col-md-4"></div>
            <div class="col-md-8"></div>
        </div>
</div>

　　(3) The specific content should be placed in the column container (column), and only the column (column) can be used as a direct child element of the row container (.row)

　　(4) Create spacing between columns by setting padding. Then offset the effect of padding by setting negative margins for the first and last columns

2. Basic usage

copy code

<div class="container">
        <div class="row">
            <div class="col-md-4">col-md-4</div>
            <div class="col-md-8">col-md-8</div>
        </div>

        <div class="row">
            <div class="col-md-3">col-md-3</div>
            <div class="col-md-9">col-md-9</div>
        </div>
</div>

　　Two lines are defined in the above code, the ratio of the first line is 4:8, and the ratio of the second line is 3:9. The effect of the running page is as follows

3. Parameter introduction

　　The following table provides a detailed look at how Bootstrap's grid system works on a variety of screen devices.

4. Offset

　　Sometimes, we don't want two adjacent columns to be close together, but we don't want to use margins or other technical means. At this time, you can use the column offset (offset) function to achieve. Using column offset is also very simple, just add the class name "col-md-offset-*" to the column element (where the asterisk represents the number of column combinations to be offset), then the column with this class name will be sent to Right offset. For example, you add "col-md-offset-4" to the column element, which means that the column is shifted to the right by the width of 4 columns.

<div class="container">
        <h4>列向右移动四列的间距</h4>
        <div class="row">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
            <div class="col-md-2">.col-md-3</div>
        </div>
        <div class="row">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div>
        </div>
    </div>
    <br /><br />

    <div class="container">
        <h4>发生行断裂</h4>
        <div class="row">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
            <div class="col-md-2">.col-md-3</div>
        </div>
        <div class="row">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div>
        </div>
        <div class="row">
            <div class="col-md-3">.col-md-3</div>
            <div class="col-md-3 col-md-offset-3">col-md-offset-3</div>
            <div class="col-md-4">col-md-4</div>
        </div>
    </div>
    <br /><br />
    <div class="container">
        <div class="row">
            <div class="col-sm-2">col-sm-2</div>
            <div class="col-sm-2 col-sm-offset-2">col-sm-2</div>
            <div class="col-sm-2">col-sm-2</div>
            <div class="col-sm-3 col-sm-offset-1">col-sm-2</div>
        </div>
    </div>

The rendering of the running page is as follows:

5. Column sorting

　　Column sorting is actually changing the direction of the column, that is, changing the left and right floating, and setting the floating distance. In Bootstrap's grid system this is done by adding the class names "col-md-push- " and "col-md-pull- " (where the asterisk represents the number of column combinations to move)

6. Nesting

　　The grid system of the Bootstrap framework also supports nesting of columns. You can add one or more row containers to a column, and then insert columns into this row container (using columns as described above). But the row container (row) in the column container, when the width is 100%, is the width of the current outer column

<div class="container">
        <div class="row">
            <div class="col-md-8">
                我的里面嵌套了一个网格

                <div class="row">
                    <div class="col-md-6">col-md-6</div>
                    <div class="col-md-6">col-md-6</div>
                </div>
            </div>
            <div class="col-md-4">col-md-4</div>
        </div>
        <div class="row">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-8">
                我的里面嵌套了一个网格

                <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>
                </div>
            </div>
        </div>
    </div>