为啥在引导程序中使用多个 col-[lg|md|sm|xs]-？ [复制]

Posted 2023-03-06

【中文标题】为啥在引导程序中使用多个 col-[lg|md|sm|xs]-？ [复制]

【英文标题】：Why use multiple col-[lg|md|sm|xs]- in bootstrap? [duplicate]为什么在引导程序中使用多个 col-[lg|md|sm|xs]-？ [复制]

【发布时间】：2016-07-28 12:11:09

【问题描述】：

我见过一些项目使用类似的东西

<div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">

他们为什么使用多列？

【参考方案1】：

因为我们可以让它适用于所有设备，例如小型设备、中型设备、小型设备、超小型设备 Xs - 超小型设备 Md - 中型设备 小型设备

【讨论】：

我是否需要指定` ` 以获得所有设备的100% 宽度?

没有。您可以使用唯一的col-lg-12 宽度将针对所有设备宽度自动调整，除非您希望不同设备的宽度不同

【参考方案2】：

来自the bootstrap doc：

网格类适用于屏幕宽度大于或等于的设备 到断点大小，并覆盖针对较小的网格类 设备。因此，例如将任何 .col-md-* 类应用于元素 不仅会影响其在中型设备上的样式，还会影响大型设备上的样式 如果 .col-lg-* 类不存在，则设备。