Bootstrap 3、col 和 col-# 类

Posted 2023-03-06

【中文标题】Bootstrap 3、col 和 col-# 类

【英文标题】：Bootstrap 3, col and col-# class

【发布时间】：2016-03-16 13:11:28

【问题描述】：

我在引导模板上看到了 col 和 col-# 类，它们是什么以及何时以及何时使用 col 和 col-# 类？ 到处我只阅读关于 col-sm-# 或 col-md-# 类的信息，我没有看到任何关于 col 或 col-# 的信息

【问题讨论】：

Meaning of numbers in col-md-4 , col-xs-1 , col-lg-2 in bootstrap的可能重复

【参考方案1】：

没有 col-#-classes。

您使用 col-xs-# / col-sm-# / col-md-# / col-lg-# 进行布局。

就这么简单：

xs 是最小视口

如果您使用例如两个 col-sm-6，它们只会在移动设备上折叠。漂浮在上方：> 768px。

如果您使用 col-md-6，它们会折叠

如果你使用 col-lg-6，它们只会在 >1200px 的视口上浮动。低于他们正在崩溃。

附加信息：每组 12 列都应包含在 div.row 中。 （您也可以在第 12 列之后折叠，但这可能需要对您的边距/填充进行一些 CSS 修复。

延伸阅读：http://getbootstrap.com/css/#grid