＆＃34; col-md-4＆＃34;，＆＃34;中数字的含义col-xs-1＆＃34;，＆＃34; col-lg-2＆＃34;在Bootstrap中

Question

我对新Bootstrap中的网格系统感到困惑，尤其是这些类：

col-lg-*
col-md-*
col-xs-*

（其中*代表一些数字）。

任何人都可以解释以下内容：

1. 该号码是如何对齐网格的？
2. 如何使用这些数字？
3. 他们实际代表什么 ？

Answer 1

忽略字母（x s ， sm ， md ， lg ） 现在 ，我将从数字开始...

• 数字（1-12）代表任何div的总宽度的一部分
• 所有div分为12列
• 所以，col-*-6跨越12列中的6列（宽度的一半），col-*-12跨越12列中的12列（整个宽度）等。

因此，如果您想要两个相等的列来跨越div，请写

<div class="col-xs-6">Column 1</div>
<div class="col-xs-6">Column 2</div>

或者，如果您希望三个不相等的列跨越相同的宽度，您可以写：

<div class="col-xs-2">Column 1</div>
<div class="col-xs-6">Column 2</div>
<div class="col-xs-4">Column 3</div>

您会注意到＃列的总数最多为12个。它可能少于12个，但要小心超过12个，因为您的违规div会降低到下一行（不是{{1} }，这是另一个故事。）

您还可以在列中嵌套列，（最好使用.row包装它们），例如：

.row

每组嵌套的div也最多包含12个父div的列。 注意：由于每个<div class="col-xs-6"> <div class="row"> <div class="col-xs-4">Column 1-a</div> <div class="col-xs-8">Column 1-b</div> </div> </div> <div class="col-xs-6"> <div class="row"> <div class="col-xs-2">Column 2-a</div> <div class="col-xs-10">Column 2-b</div> </div> </div> 类的两边都有15px填充，因此通常应将嵌套列包装在.col中，其边距为-15px。这样可以避免重复填充，并保持内容在嵌套和非嵌套col类之间排列。

- 你没有具体询问.row用法，但它们是相辅相成的，所以我无法帮助，只能触及它......

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

• xs = 超小屏幕（手机）
• sm = 小屏幕（平板电脑）
• md = 中型屏幕（某些桌面）
• lg = 大屏幕（其余桌面）

  

阅读"Grid Options"   有关详细信息，请参阅官方Bootstrap文档中的章节。

你应该通常使用多个列类对div进行分类，因此它的行为会因屏幕大小而异（这是使bootstrap响应的核心）。例如：类xs, sm, md, lg和col-xs-6的div将跨越手机屏幕的一半（xs）和平板电脑（sm）的1/3。

col-sm-4

注意：根据下面的评论，给定屏幕尺寸的网格类适用于该屏幕尺寸和更大，除非另一个声明覆盖它（即<div class="col-xs-6 col-sm-4">Column 1</div> <!-- 1/2 width on mobile, 1/3 screen on tablet) --> <div class="col-xs-6 col-sm-8">Column 2</div> <!-- 1/2 width on mobile, 2/3 width on tablet --> 在col-xs-6 col-md-4 和xs 上有6列，sm 和md 上有4列，即使{{ 1}}和lg从未明确声明）

注意：如果您没有定义sm，则默认为lg（即xs是{{1}宽度的一半}}，col-xs-12和col-sm-6屏幕，但sm屏幕上的全宽。）

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

Answer 2

  

Bootstrap网格系统有四个类：
   xs（适用于手机）
  sm（用于平板电脑）
  md（用于桌面）
  lg（适用于较大的桌面）

     

可以组合上面的类来创建更加动态和灵活的布局。

     

提示：每个课程都会向上扩展，因此如果您希望为其设置相同的宽度   xs和sm，你只需要指定xs。

好的，答案很简单，请继续阅读：

col-lg - 代表列大≥ 1200px
col-md - 代表列中≥ 992px
col-xs - 代表专栏小≥ 768px

像素数是断点，因此例如col-xs在窗口小于 768px （可能是移动设备）时定位元素...

我还创建了下面的图片，以显示网格系统的工作原理，在这个示例中，我使用它们3，如col-lg-6，向您展示网格系统如何在页面中工作，看看如何{{1 }，lg和md响应窗口大小：

Answer 3

重点是：

col-lg-* col-md-* col-xs-* col-sm定义这些不同屏幕尺寸中的列数。

示例：如果您希望桌面屏幕和手机屏幕中有两列，则会在列中放置两个col-md-6和两个col-xs-6类。

如果您希望桌面屏幕中有两列，而手机屏幕中只有一列（即两行堆叠在一起），则会在列中添加two col-md-6和两个col-xs-12因为总和将是24，它们将自动堆叠在彼此之上，或者只保留xs样式。

Answer 4

来自Twitter Bootstrap documentation：

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

to Read More...

Answer 5

在这里

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

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

以上规则仅在屏幕较大时应用。当屏幕较小时，该规则将被丢弃，并且每行只显示一个组件。

下图显示了各种屏幕尺寸宽度：