2.3.2 混合与匹配

在前一个例子中，都是4行，其中前3行是针对大桌面显示器（lg）设备设置的列，当在桌面显示器、平板设备、超小设备上时，是从上到下垂直排列。只有第4行使用的是.col，针对的是所有设备，所以无论设备宽度为多少，都是平均分为3列，如图2-3所示。

图2-3 桌面显示器（md）、平板设置（sm）、超小设备（xs）的显示效果

为了解决这个问题，我们在同一个元素上应用不同类型的样式，以适配不同尺寸的屏幕。代码如下，效果如图2-4～图2-6所示。

<div class=＂container＂>
    <div class=＂row＂>
        <div class=＂col-12 col-md-8＂>.col-12 .col-md-8</div>
        <div class=＂col-6 col-md-4＂>.col-6 .col-md-4</div>
    </div>
        <div class=＂row＂>
        <div class=＂col-6 col-md-8 col-lg-3＂>.col-6 .col-md-8 .col-lg-3</div>
        <div class=＂col-6 col-md-4 col-lg-3＂>.col-6 .col-md-4 .col-lg-3</div>
        <div class=＂col-6 col-md-8 col-lg-3＂>.col-6 .col-md-8 .col-lg-3</div>
        <div class=＂col-6 col-md-4 col-lg-3＂>.col-6 .col-md-4 .col-lg-3</div>
    </div>
    <div class=＂row＂>
        <div class=＂col-6＂>.col-6</div>
        <div class=＂col-6＂>.col-6</div>
    </div>
</div>

图2-4 平板设备（sm）、超小设备（xs）的显示效果

图2-5 桌面显示器 md的显示效果

图2-6 大桌面显示器（lg）、超大桌面显示器（xl）的显示效果