Bootstrap中“ col-md-4”，“ col-xs-1”，“ col-lg-2”中数字的含义

干得好

col-lg-2：如果屏幕很大（lg），则此组件将占用2个 元素的空间，因为整行可容纳12个元​​素（因此，您将在大屏幕上看到此组件仅占行的16％的空间）

col-lg-6：如果屏幕很大（lg），则此组件将占用6个 元素的空间，因为整行可以容纳12个元​​素-应用后，您将看到该组件占用了该行中一半的可用空间。

Above rule is only applied when the screen is large. when the screen is small this rule is discarded and only one component per row is shown.

Below image shows various screen size widths :

从Twitter Bootstrap文档中：

• 小网格（≥768px）= .col-sm-*，
• 中格（≥992px）= .col-md-*，
• 大网格（≥1200px）= .col-lg-*。

阅读更多...

要点是：

col-lg-* col-md-* col-xs-* col-sm 定义在这些不同的屏幕尺寸中将有多少列。

示例：如果要在桌面屏幕和电话屏幕中有两列，请在这两列中放置两个col-md-6和两个col-xs-6类。

如果要在桌面屏幕上显示两列，而在电话屏幕上仅显示一列（即，两行相互堆叠），则将two col-md-6两col-xs-12列放进去，因为总和为24，因此它们将自动堆叠在每一行的顶部其他，或者只保留xs样式。

The Bootstrap grid system has four classes:
xs (for phones)
sm (for tablets)
md (for desktops)
lg (for larger desktops)

The classes above can be combined to create more dynamic and flexible layouts.

Tip: Each class scales up, so if you wish to set the same widths for xs and sm, you only need to specify xs.

OK, the answer is easy, but read on:

col-lg- stands for column large ≥ 1200px
col-md- stands for column medium ≥ 992px
col-xs- stands for column extra small ≥ 768px

The pixel numbers are the breakpoints, so for example col-xs is targeting the element when the window is smaller than 768px(likely mobile devices)...

我还创建了下面的图片显示了如何网格系统的工作原理，在这个例子我使用他们的3个，喜欢col-lg-6向你展示电网系统工作的页面，看看如何如何lg，md并xs响应窗口大小：