
上QQ阅读APP看书,第一时间看更新
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)的显示效果