bootstrap grid system to test a variety of styles

First, the grid 12 in the same row are typing

In front of the initial code div make the following changes:

<div class="container">
    <div class="row"><!-- 定义行row-->
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
    </div>
</div>

Browser may output the following results

Second, a total of two outputs, a first column representing 4 parts, 8 parts occupy the second column

code show as below:

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

Browser output results are as follows

Third, the test line 12 showing how multiple parts will handle portion

Code:

<div class="container">
    <div class="row">
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div><!-- 这是第13份-->
    </div>
    <div class="row">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-8">col-md-8</div>
    </div>
</div>

Result: The extra-session fall down

Fourth, if not, 4 parts such as a first row, second column 4 parts

Code

<div class="container">
    <div class="row">
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div><!-- 这是第13份-->
    </div>
    <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-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
    </div>
</div>

As a result, less than part of the back will empty out

Fifth, if not in the case, how to move, such as a push back the first column, the second row pushed back parts 3

Code

<div class="container">
    <div class="row">
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div><!-- 这是第13份-->
    </div>
    <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-4 col-md-offset-1">col-md-4</div>
        <div class="col-md-4 col-md-offset-3">col-md-4</div>
    </div>
</div>

Result: If push more will fall down the

6. The first column 4 parts, 6 parts of the second column, how to exchange two

(1) the two codes be exchanged, but this is not good

(2) add a thing to achieve

Code

<div class="container">
    <div class="row">
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div><!-- 这是第13份-->
    </div>
    <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-4 col-md-offset-1">col-md-4</div>
        <div class="col-md-4 col-md-offset-3">col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-4 col-md-push-6">col-md-4</div>
        <div class="col-md-6 col-md-pull-4">col-md-6</div>
    </div>
</div>

result

Seven, nine parts such as first, second column parts 3, now if a nested two parts 9 in the first column below, 6 parts of each column happens

Code:

<div class="container">
    <div class="row">
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div><!-- 这是第13份-->
    </div>
    <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-4 col-md-offset-1">col-md-4</div>
        <div class="col-md-4 col-md-offset-3">col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-4 col-md-push-6">col-md-4</div>
        <div class="col-md-6 col-md-pull-4">col-md-6</div>
    </div>
    <div class="row">
        <div class="col-md-9">col-md-9
            <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-3">col-md-4</div>
    </div>
</div>

result

Eight configurations on different devices

Code

<div class="row">
    <div class="col-sm-12 col-md-8">col-sm-12 col-md-8</div>
    <div class="col-sm-6 col-md-4">col-sm-6 col-md-4</div>
</div>
<div class="row">
    <div class="col-sm-6 col-md-4">col-sm-6 col-md-4</div>
    <div class="col-sm-6 col-md-4">col-sm-6 col-md-4</div>
    <div class="col-sm-6 col-md-4">col-sm-6 col-md-4</div>
</div>
<div class="row">
    <div class="col-sm-6 col-md-6">col-sm-6 col-md-6</div>
    <div class="col-sm-6 col-md-6">col-sm-6 col-md-6</div>
</div>

1、大屏上的结果为（1200px以上）

2、小屏上的结果为（768px-992px）

3、超小屏上的结果（768px以下）

九、被卡主的情况

代码：

<div class="container">
    <div class="row">
         <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3这个地方我给他多加点内容来进行测试</div>
         <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
         <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
         <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
    </div>
</div>

结果

小屏以上

超小屏

小屏情况下，第一列的内容太多了，后面的三列就下不去，卡住了

如何解决？

<div class="container">
    <div class="row">
         <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3这个地方我给他多加点内容来进行测试</div>
         <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
         <div class="clearfix visible-xs"></div>
         <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
         <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
    </div>
</div>