• 从维基百科查到栅格的定义为：栅格设计系统（又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。
    • Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
    • 详细介绍 https://v3.bootcss.com/css/#grid

    • [x] 有个栅格系统，连float、inline-block等都不需要控制了！真是人生无常，大肠包小肠。 ```javascript <!DOCTYPE html>

    col-md-1
    col-md-1
    col-md-1
    col-md-1
    col-md-1
    col-md-1
    col-md-1
    col-md-1
    col-md-1
    col-md-1
    col-md-1
    col-md-1
    1. </div>
    3. <div class="row">
    4.     <div class="col-md-6">col-md-1</div>
    5.     <div class="col-md-6">col-md-1</div>
    6. </div>
    7. <div class="row">
    8.     <div class="col-md-9">col-md-1</div>
    9.     <div class="col-md-3">col-md-1</div>
    10. </div>
    13. <div class="row">
    14.     <div class="col-md-6 col-sm-9">col-md-6</div>
    15.     <div class="col-md-6 col-sm-3">col-md-6</div>
    16. </div>
    18. <h3>列偏移</h3>
    19. <div class="row">
    20.     <div class="col-md-4 col-md-offset-3">col-md-4</div>
    21. </div>
    23. <h3>列嵌套</h3>
    24. <div class="row">
    25.     <div class="col-md-6">
    26.         <div class="row">
    27.             <div class="col-md-6">col-md-6</div>
    28.             <div class="col-md-6">col-md-6</div>
    29.         </div>
    30.     </div>
    31. </div>
    33. <h3>列排序</h3>
    35. <div class="row">
    36.     <div class="col-md-4 col-md-push-2">col-md-4</div>
    37. </div>
    39. <div class="row">
    40.     <div class="col-md-4 col-md-push-4">col-md-4</div>
    41.     <div class="col-md-4 col-md-pull-4">col-md-4(2)</div>
    42. </div>
    44. <div class="row">
    45.     <div class="col-md-4 pull-right col-md-pull-2">col-md-4</div>
    46. </div>

    ```