css中col-lg-1是什么意思,css - 引导程序中“col-md-4”，“col-xs-1”，“col-lg-2”中数字的含义...

暂时忽略字母(xs，sm，md，lg)，我将从数字开始......

数字(1-12)代表任何div的总宽度的一部分

所有div分为12列

所以，.col跨越12列中的6列(宽度的一半)，col-*-12跨越12列中的12列(整个宽度)等

所以，如果你想要两个相等的列来跨越div，写一下

Column 1

Column 2

如果你想要三个不相等的列跨越相同的宽度，你可以写：

Column 1

Column 2

Column 3

您会注意到＃列总是加起来为12.它可能少于12，但要小心超过12，因为您的违规div将下降到下一行(不是.col，这是另一个故事)。

您还可以在列中嵌套列(最好使用.col包装它们)，例如：

Column 1-a

Column 1-b

Column 2-a

Column 2-b

每组嵌套的div也跨越其父div的12列。 注意：由于每个.col类的两侧都有15px填充，因此通常应将嵌套列包装在.row中，其边距为-15px。 这样可以避免重复填充，并使内容在嵌套和非嵌套col类之间保持一致。

- 你没有具体询问.row的使用方法，但它们是相辅相成的，所以我不禁触摸它......

简而言之，它们用于定义应该应用的类的屏幕大小：

xs =超小屏幕(手机)

sm =小屏幕(平板电脑)

md =中等屏幕(某些桌面)

lg =大屏幕(其余桌面)

阅读“网格  选项”   有关详细信息，请参阅官方Bootstrap文档中的章节。

您通常应该使用多个列类对div进行分类，因此它的行为会根据屏幕大小而有所不同(这是使引导响应的核心)。 例如：类.row和col-xs-12的div将跨越手机屏幕的一半(xs)和平板电脑(sm)屏幕的1/3。

Column 1

Column 2

注意：根据下面的评论，给定屏幕大小的网格类适用于该屏幕大小和更大，除非另一个声明覆盖它(即.row跨越col-xs-12和.row上的6列，以及col-sm-6和.row上的4列，即使sm和md 从未明确声明)

注意：如果您没有定义.row，它将默认为col-xs-12(即col-sm-6是sm,md和lg屏幕宽度的一半，但在xs屏幕上为全宽)。

注意：如果您的.row包含超过12个cols，只要您知道它们将如何反应，它实际上是完全正常的。 - 这是一个有争议的问题，并不是每个人都同意。