col-lg-4 和 col-md-3 和 col-xs-3 有啥区别？

Posted 2023-03-06

【中文标题】col-lg-4 和 col-md-3 和 col-xs-3 有啥区别？

【英文标题】：what is the difference between col-lg-4 and col-md-3 and col-xs-3?col-lg-4 和 col-md-3 和 col-xs-3 有什么区别？

【发布时间】：2014-03-05 19:59:43

【问题描述】：

对于字段大小，我给出了 col-lg-4 和 col-Md-3 和 col-XS-2。但最后列大小只有 4，然后为什么我们需要 col-MD-3 和 col-XS- 2.请解释一下...

正文 1

【问题讨论】：

您需要为此阅读bootstrap 文档。 getbootstrap.com/getting-started.

你应该接受答案

What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?的可能重复

【参考方案1】：

您可以查看the Bootstrap grid documentation了解详细信息，如果在此回复后的某个日期更新。

---

Bootstrap 列类名的语法构造如下：

. prefix - when to collapse - number of grid columns to occupy

上面的prefix 是col ，表示该元素是Bootstrap列系统的一部分。

when to collapse 选项（xs、sm、md 或 lg）指示列应停止内联显示并折叠以放置在彼此上方的宽度。

number of grid columns to occupy 表示可分类元素应占据整行的多大部分。在 Bootstrap 中，一整行由 12 列组成。

折叠宽度目前定义如下：

xs - 网格始终是水平的，容器的样式为 width: auto，这意味着它将占用当前可用的所有空间。 sm - 网格在超过 750 像素宽度的断点处是水平的。 md - 同上（如前所述），但来自 970px。 lg - 同上，但从 1170 像素开始。

简而言之，不同的折叠选项允许您定义布局应折叠的宽度：作为简化说明，页面的移动视图（或类似视图）的窗口宽度 应该显示出来。

本回复开头链接的文档也提供了一些示例。

【讨论】：

谢谢你...例如，如果我希望我的页面必须在桌面、平板电脑、移动设备中查看..所以为此我必须提供折叠选项 lg、md、sm..right.. .请解释一下...

您只能指定其中一个折叠选项。定义的类指定布局应该重排的宽度。