3.Bootstrap(中文教程)网格系统：12 栏的网格系统

一.网格设为12格

<div class="container" id="demo">  <div class="row">    <div class="col-2"><span>1</span></div>    <div class="col-4"><span>2</span></div>    <div class="col-6"><span>2</span></div>  </div></div>#demo.container,#demo.container-fluid{  background: #054bd1;/*蓝*/  height: 100vh;  color: white;}#demo.container .row{  background: #021d51;/*深蓝*/  boder-bottom: 1px solid #000;}#demo.container .row > div > span{  display: block;  background: #487bdd;/*浅蓝*/  color: white;  font-size: 32px;  padding: 8px;  border: 1px solid #021d51;/*深蓝*/}

重点：

1.这裏一个col，可以佔12格。写法为col-12，上面的例子为三个col。
2.bootstrap网格系统一个row只能用12格，上面的例子刚好12格

二.网格设为13格

<div class="container" id="demo">   <div class="row">    <div class="col-2"><span>1</span></div>    <div class="col-4"><span>2</span></div>    <div class="col-7"><span>2</span></div>  </div></div>

重点：

在这里的例子col-2.col-4.col-7加起来超过12格，超过12格则会将最后一个的col-7往下排。

codepen
参考：bootstrap4