2.3.3 等宽列

1.基本用法

Bootstrap 4的栅格系统基于flexbox，既可以使用不带数字的.col-X（X为sm、md、lg或xl）类，来设置对应设备上的等宽列；也可以不带设备宽度前缀.col类，设置所有设备上的等宽列。

【实例2-2】（文件 equalgrid.html）（以下为body标签里面的内容，其他与修改后的【实例2-1】相同）

<div class=＂container＂>
  <!--大于等于576px时 3个等分列-->
  <div class=＂row＂>
      <div class=＂col-sm＂>1/3</div>
      <div class=＂col-sm＂>1/3</div>
      <div class=＂col-sm＂>1/3</div>
  </div>
  <!--所有设备上3个等分列-->
  <div class=＂row＂>
      <div class=＂col＂>1/3</div>
      <div class=＂col＂>1/3</div>
      <div class=＂col＂>1/3</div>
</div>
</div>

以上代码在Chrome浏览器中的运行效果如图2-7所示。

2.多行等宽列

等宽列可以设置添加“.w-100”为多行等宽。但这里存在一个 Safari的flexbox缺陷，如果没有明确的flex-basis或 border的话，则可能无法工作。不过，如果浏览器是最新版本的，则不存在这个问题。

【实例2-3】（文件equalgrid-mline.html）

<div class=＂row＂>
    <div class=＂col＂>列</div>
    <div class=＂col＂>列</div>
    <div class=＂w-100＂></div>
    <div class=＂col＂>列</div>
    <div class=＂col＂>列</div>
</div>
<div class=＂row＂>
    <div class=＂col＂>列</div>
    <div class=＂col＂>列</div>
    <div class=＂w-100 d-none d-md-block＂></div>
    <div class=＂col＂>列</div>
    <div class=＂col＂>列</div>
</div>

以上代码在Chrome浏览器中的运行效果如图2-8所示。

说明：其中，第2行通过.d-none、.d-md-block类的配合使用，当设置设备宽度为中屏时，换新行。

3.设置一列宽度

设定一列宽度，其他列等宽。

【实例2-4】（文件equalgrid-one.html）

<div class=＂container＂>
      <div class=＂row＂>
      <div class=＂col＂>第1列</div>
      <div class=＂col＂>第2列</div>
      <div class=＂col-6＂>第 3列(指定宽度)</div>
      <div class=＂col＂>第4列</div>
      </div>
</div>

以上代码在Chrome浏览器中的运行效果如图2-9所示。