引导程序中col-md-4，col-xs-1，col-lg-2中数字的含义
我在新的bootstrap中对网格系统感到困惑，特别是这些类：
col-lg-* col-md-* col-xs-* （其中*代表某个数字）
任何人都可以请解释这个数字是如何alignment网格 ，以及如何使用这些数字 ，以及他们实际上代表什么
现在忽略字母（xs，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个。它可能less于12个，但要小心超过12个，因为你的违规div会碰到下一行（而不是.row ，这完全是另外一个故事） 。
您也可以在列中嵌套列 （最好使用包围它们的.row包装），例如：
<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>
每套嵌套的div也跨越他们的父div的12列。 注意：由于每个.col类在两边都有15px的填充，所以通常应该将嵌套的列.row一个.row ，它有-15px页边距。 这样可以避免重复填充，并使嵌套和非嵌套col类之间的内容保持一致。
– 你没有具体询问xs, sm, md, lg使用情况，但是他们携手合作，所以我不禁要触及它。
简而言之，它们被用来定义该类应该适用的屏幕尺寸：
- xs =额外的小屏幕（手机）
- sm =小屏幕（平板电脑）
- MD =中等屏幕（一些桌面）
- lg =大屏幕（剩余桌面）
您通常应该使用多个列类对div进行分类，以便根据屏幕大小（这是启动引导响应的核心）来performance不同的行为。 例如：类col-xs-6和col-sm-4的div将跨越手机（xs）的一半屏幕和平板电脑（sm）的三分之一屏幕。
<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 和sm上的6列，以及4列md 和lg ，即使sm和lg从未明确声明）
注：如果你没有定义xs ，它将默认为col-xs-12 （即col-sm-6是sm ， md和lg屏幕宽度的一半，但在xs屏幕上为全angular）。
注意：如果你的.row包含12个以上的.row那么它确实是完全正确的，只要你知道它们将如何反应。 – 这是一个有争议的问题，并不是每个人都同意。
Bootstrap网格系统有四个类：
xs（手机）
sm（用于平板电脑）
md（用于桌面）
LG（对于较大的桌面）上面的类可以结合使用，创build更加dynamic和灵活的布局。
提示：每个类都会放大，所以如果您希望为xs和sm设置相同的宽度，则只需指定xs。
好的，答案很简单，但请继续阅读：
col-lg-代表≥ 1200px列
col-md-代表列介质≥ 992px
col-xs-表示列超小≥ 768px
像素数是断点，因此，例如col-xs在窗口小于768px （可能是移动设备）时将目标定位到元素上。
我还创build了下面的图片来展示网格系统是如何工作的，在这个例子中，我使用它们，比如col-lg-6 ，告诉你网格系统是如何工作的，看看lg ， md和xs是如何工作的响应窗口大小：
从Twitter Bootstrap文档 ：
- 小格（≥768px）=
.col-sm-*， - 中等网格（≥992px）=
.col-md-*， - 大网格（≥1200px）=
.col-lg-*。
阅读更多…
重点是这样的：
col-lg-* col-md-* col-lg-* col-md-* col-xs-* col-sm定义在这些不同的屏幕尺寸下有多less列。
例如：如果你想在桌面屏幕和电话屏幕上有两列，你需要在列中放置两个col-md-6和两个col-xs-6类。
如果你想要在桌面屏幕上有两列，而在手机屏幕上只有一列（即两行堆叠在一起），你在two col-md-6放置了two col-md-6和两个col-xs-12 ，将是24他们将自动堆叠在一起，或只是离开xs风格。
