2.Bootstrap(中文教程)网格系统：Container，Rows 与 Columns

一.3个col

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

重点：

row为一栏，col为一列。所以col会在row里面分三等分

二.6个col

<div class="container" id="demo">    <div class="row">        <div class="col"><span>1</span></div>        <div class="col"><span>2</span></div>        <div class="col"><span>3</span></div>        <div class="col"><span>4</span></div>        <div class="col"><span>5</span></div>        <div class="col"><span>6</span></div>     </div></div>

重点：

1.如果这里分六等份，col会在row当中全部佔完六等份。
2.补充：这里row因为bootstrap4，里面的display为flex(拿掉的话整个col会佔据一整行)。而col的flex-grow为1(拿掉的话会与float置左的功能一样往左来排列)

codepen
参考：bootstrap4