bootstrap3,4对比(速度过)之网格系统

网格系统

v3:

<https://v3.bootcss.com/css/#grid

v4:

https://v4.bootcss.com/docs/4.0/layout/grid/

container和container-fluid（v3,v4相同）

• container两边有一定的margin
• container-fluid占满横向全屏，无两侧margin
• 行用row，列col
• 一行共12份

 <div class="container">
    <div class="row">
        <div class="col-lg-4" style="background-color: #09afff;"></div>
        <div class="col-lg-4" style="background-color: red;"></div>
        <div class="col-lg-4" style="background-color: #09afff;"></div>
    </div>
  </div>

 <div class="container-fluid">
    <div class="row">
        <div class="col-lg-4" style="background-color: #09afff;"></div>
        <div class="col-lg-4" style="background-color: red;"></div>
        <div class="col-lg-4" style="background-color: #09afff;"></div>
    </div>
  </div>

container的不同之处

v3container由分成四段：

v4container由分成五段：

V4中可直接使用class="col-n"和class=“col”

• 在v3中只能使用col-md(lg,sm,xs)-n，实测显示在v3中使用class="col-n"和class=“col”，每个col分别占一行
• 在v4中假设使用col-4,则3个col-4占一行
• 在v4中假设使用col,则不管多少个，就算超出12份，所有的col都占一行，且均分

请看代码：（v4）

<container>
  <div class="row">
    <div class="col-4" style="background-color: red;"></div>
    <div class="col-4" style="background-color: blue;"></div>
    <div class="col-4" style="background-color: yellow;"></div>
    <div class="col-4" style="background-color