这些类的顺序； col-sm ， col-lg ， col-md 和 col-xs 不同

Posted 2023-03-06

【中文标题】这些类的顺序； col-sm ， col-lg ， col-md 和 col-xs 不同

【英文标题】：Does the order of the these classes; col-sm , col-lg ,col-md & col-xs differ

【发布时间】：2016-04-25 18:42:58

【问题描述】：

我有一个关于 bootstrap 3.0 类顺序的问题，现在如果我写以下我从 sm 到 lg 的地方：-

<div class="col-sm-4 col-md-4 col-lg-4 address">

如果我将班级顺序从lg更改为sm会有什么不同：-

<div class="col-lg-4 col-md-4 col-sm-4  address">

还是顺序无所谓？

【问题讨论】：

为什么需要不止一个？这些类是要单独使用的，不是吗？另外，我会假设 bootstrap.css 中显示的第一个是要使用的。

刚刚略过这个，看起来它是 bootstrap.css 或 bootstrap.min.css 中最后一个使用的。如果以上所有规则中两条规则相同，则最后宣布的规则获胜。嵌入在 html 中的 CSS 始终位于外部样式表之后，无论 html 中的顺序如何vanseodesign.com/css/css-specificity-inheritance-cascaade

@t03smcg0t3s 感谢您的回复。。现在你说我应该只定义一个类，但是如果我想根据屏幕大小进行不同的 col 设置，那么它应该支持多个类定义，这样对吗？？？

@JohnJohn 您可以在单个标签中拥有任意数量的类。在生成渲染树时，每个 css 定义都被应用，所以所有定义。因此正在显示最后定义的 css 属性。例如检查这个小提琴。 jsfiddle.net/errhunter/heertkud

我不擅长解释，所以上面的东西解释得不好。我建议您通读developers.google.com/web/fundamentals/getting-started/?hl=en 以了解更多信息。

【参考方案1】：

<div class="col-sm-4 col-md-4 col-lg-4 address">

和

<div class="col-lg-4 col-md-4 col-sm-4 address">

两者的工作方式相同。 检查这个例子fiddle

【讨论】：

感谢您的回复，但是您能建议什么是管理哪个类会产生影响的规则吗？我的意思是关于这些类在 bootstrap.css 中的顺序？还是关于这些类在 div 中的顺序？？？

一次只有一个类会生效。这取决于您所在的视口。如果您从移动设备查看，则col-*-xs 将生效。查看这个写得很好的答案以获取更多信息：***.com/a/24177022/923426

好的，谢谢你的链接，但是如果我说 或 会完全一样吗？ 一点也不，顺序并不重要，但 -xs- 和 -sm- 都是不同的类。所以交换它们会改变布局。当然。 sorry sorry 我的意思是 和 将是同样，我打错了数字……对不起？？