Bootstrap中“ col

仅适用于Bootstrap 3。

忽略字母（X 小号 ， SM ， MD ， LG ） 现在 ，我只用数字开始…

• 数字（1-12）代表任何div总宽度的一部分
• 所有div分为12列
• 因此，

  col-*-6

  跨度为12列中的6个（一半的宽度），

  col-*-12

  跨度为12列中的12个（整个宽度），等等

因此，如果您希望 两个相等的列 跨越一个div，请编写

<div >Column 1</div><div >Column 2</div>

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

<div >Column 1</div><div >Column 2</div><div >Column 3</div>

您会注意到列数始终加起来为12。它可以少于十二，但是要注意，如果超过十二，则您的冒犯div会跳到下一行（不是

.row

您也可以将 列嵌套在列 中（最好

.row

<div >  <div >    <div >Column 1-a</div>    <div >Column 1-b</div>  </div></div><div >  <div >    <div >Column 2-a</div>    <div >Column 2-b</div>  </div></div>

每套嵌套的div最多也跨越其父div的12列。注意：由于每个

.col

.row

-您没有具体询问

xs, sm, md, lg

简而言之，它们用于定义该类应采用的 屏幕尺寸 ：

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

通常， 您应该使用多个列类对div进行分类，以便它的行为取决于屏幕大小（这是使Bootstrap响应的核心）。例如：使用类一个div

col-xs-6

col-sm-4

<div >Column 1</div> <!-- 1/2 width on mobile, 1/3 screen on tablet) --><div >Column 2</div> <!-- 1/2 width on mobile, 2/3 width on tablet -->

注： 按下面的评论，对于给定的屏幕尺寸网格类适用于屏幕尺寸 和更大 除非另一份声明重写它（即

col-xs-6 col-md-4

xs

sm

md

lg

sm

lg

注意： 如果你没有定义

xs

col-xs-12

col-sm-6

sm

md

lg

xs

注意： 如果您

.row