blocks|key|2739454|text|仅适用于Bootstrap+3。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2739455|现在忽略字母(xs，sm，md，lg)+__，我将从数字开始...|2739456|2739457|数字(1-+12+)表示任何div|unordered-list-item|2739458|的总宽度的一部分所有div被分成12列|2739459|so，col-*-6跨越12列中的6列(宽度的一半)，col-*-12跨越12列中的12列(整个宽度)，依此类推<|CODE|2739460|>F213|2739461|因此，如果您希望两个相等的列跨越一个div，可以这样写|2739462|<div+class="col-xs-6">Column+1</div>
<div+class="col-xs-6">Column+2</div>|code-block|syntax|javascript|2739463|或者，如果您希望三个不相等的列跨越相同的宽度，您可以这样写：|2739464|<div+class="col-xs-2">Column+1</div>
<div+class="col-xs-6">Column+2</div>
<div+class="col-xs-4">Column+3</div>|2739465|你会注意到列数总是加起来是12，它可以小于12，但是如果超过12就要小心了，因为你不喜欢的div会跳到下一行(而不是.row，这完全是另一回事)。|2739466|您还可以在列中嵌套列(最好使用.row包装器)，如下所示：|2739467|<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>|2739468|每组嵌套的div还跨越其父div的最多12列。注意：因为每个.col类的两侧都有15px的填充，所以通常应该将嵌套列包装在一个具有-15px边距的.row中。这避免了重复填充，并使内容在嵌套和非嵌套的col类之间排列。|2739469|--您没有特别询问xs,+sm,+md,+lg的用法，但它们是密切相关的，所以我不禁要提及它……|2739470|简而言之，它们用于定义该类应应用的屏幕大小：|2739471|2739472|xs+=超小屏幕(移动phones)|2739473|sm+=小屏幕(tablets)|2739474|md+=中屏(某些desktops)|2739475|lg+=大屏幕(剩余桌面)|2739476|2739477|2739478|阅读官方Bootstrap文档中的""章节，了解更多详细信息。|blockquote|2739479|2739480|2739481|通常，您应该使用多个列类对div进行分类，以便根据屏幕大小(这是使bootstrap响应的核心)的不同行为。例如:带有col-xs-6和col-sm-4类的div将覆盖手机(xs)和平板电脑(Sm)的1/3屏幕。|2739482|<div+class="col-xs-6+col-sm-4">Column+1</div>+
<div+class="col-xs-6+col-sm-8">Column+2</div>+|2739483|注意：根据下面的注释，给定屏幕大小的网格类适用于屏幕尺寸和更大的，除非另一个声明覆盖它(即col-xs-6+col-md-4在xs和sm上跨越6列，在md和lg上跨越4列，即使D63和D64从未显式声明)|2739484|注意：如果你没有定义xs，它将默认为col-xs-12+(即col-sm-6在sm，md和lg屏幕上是宽度的一半，但在xs屏幕上是全宽的)。|2739485|备注：如果您的.row包含12个以上的cols，只要您知道它们将如何反应，实际上是完全没有问题的。--这是一个有争议的问题，并不是每个人都同意。|2739486|entityMap|0|LINK|mutability|MUTABLE|url|https://getbootstrap.com/docs/4.0/layout/grid/#grid-options^0|0|G|0|0|0|0|0|3|7|R|8|0|0|8|6|0|0|8|7|0|0|1M|4|0|F|4|0|0|N|3|U|4|21|4|0|9|E|0|0|0|0|2|0|0|2|0|0|2|0|0|2|0|0|0|H|2|0|0|0|0|1N|8|1W|8|0|0|0|3|S|4|19|H|1R|2|1U|2|23|2|26|2|0|0|3|A|2|I|9|U|8|13|2|16|2|19|2|1N|2|0|0|3|7|4|0^^$0|@$1|2|3|4|5|6|7|2D|8|@$9|2E|A|2F|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|2G|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|2H|8|@]|D|@]|E|$]]|$1|I|3|J|5|K|7|2I|8|@]|D|@]|E|$]]|$1|L|3|M|5|K|7|2J|8|@]|D|@]|E|$]]|$1|N|3|O|5|K|7|2K|8|@$9|2L|A|2M|B|P]|$9|2N|A|2O|B|P]]|D|@]|E|$]]|$1|Q|3|R|5|6|7|2P|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|2Q|8|@$9|2R|A|2S|B|C]]|D|@]|E|$]]|$1|U|3|V|5|W|7|2T|8|@]|D|@]|E|$X|Y]]|$1|Z|3|10|5|6|7|2U|8|@$9|2V|A|2W|B|C]]|D|@]|E|$]]|$1|11|3|12|5|W|7|2X|8|@]|D|@]|E|$X|Y]]|$1|13|3|14|5|6|7|2Y|8|@$9|2Z|A|30|B|P]]|D|@]|E|$]]|$1|15|3|16|5|6|7|31|8|@$9|32|A|33|B|P]]|D|@]|E|$]]|$1|17|3|18|5|W|7|34|8|@]|D|@]|E|$X|Y]]|$1|19|3|1A|5|6|7|35|8|@$9|36|A|37|B|C]|$9|38|A|39|B|P]|$9|3A|A|3B|B|P]]|D|@]|E|$]]|$1|1B|3|1C|5|6|7|3C|8|@$9|3D|A|3E|B|P]]|D|@]|E|$]]|$1|1D|3|1E|5|6|7|3F|8|@]|D|@]|E|$]]|$1|1F|3|-4|5|6|7|3G|8|@]|D|@]|E|$]]|$1|1G|3|1H|5|K|7|3H|8|@$9|3I|A|3J|B|C]]|D|@]|E|$]]|$1|1I|3|1J|5|K|7|3K|8|@$9|3L|A|3M|B|C]]|D|@]|E|$]]|$1|1K|3|1L|5|K|7|3N|8|@$9|3O|A|3P|B|C]]|D|@]|E|$]]|$1|1M|3|1N|5|K|7|3Q|8|@$9|3R|A|3S|B|C]]|D|@]|E|$]]|$1|1O|3|-4|5|6|7|3T|8|@]|D|@]|E|$]]|$1|1P|3|-4|5|6|7|3U|8|@]|D|@]|E|$]]|$1|1Q|3|1R|5|1S|7|3V|8|@]|D|@$9|3W|A|3X|1|3Y]]|E|$]]|$1|1T|3|-4|5|6|7|3Z|8|@]|D|@]|E|$]]|$1|1U|3|-4|5|6|7|40|8|@]|D|@]|E|$]]|$1|1V|3|1W|5|6|7|41|8|@$9|42|A|43|B|P]|$9|44|A|45|B|P]]|D|@]|E|$]]|$1|1X|3|1Y|5|W|7|46|8|@]|D|@]|E|$X|Y]]|$1|1Z|3|20|5|6|7|47|8|@$9|48|A|49|B|C]|$9|4A|A|4B|B|C]|$9|4C|A|4D|B|P]|$9|4E|A|4F|B|P]|$9|4G|A|4H|B|P]|$9|4I|A|4J|B|P]|$9|4K|A|4L|B|P]]|D|@]|E|$]]|$1|21|3|22|5|6|7|4M|8|@$9|4N|A|4O|B|C]|$9|4P|A|4Q|B|P]|$9|4R|A|4S|B|P]|$9|4T|A|4U|B|P]|$9|4V|A|4W|B|P]|$9|4X|A|4Y|B|P]|$9|4Z|A|50|B|P]|$9|51|A|52|B|P]]|D|@]|E|$]]|$1|23|3|24|5|6|7|53|8|@$9|54|A|55|B|C]|$9|56|A|57|B|P]]|D|@]|E|$]]|$1|25|3|-4|5|6|7|58|8|@]|D|@]|E|$]]]|26|$27|$5|28|29|2A|E|$2B|2C]]]]

Applies to Bootstrap 3 only.

Ignoring the letters (xs, sm, md, lg) for now, I'll start with just the numbers...

<ul>
<li>the numbers (1-12) represent a portion of the total width of any div</li>
<li>all divs are divided into 12 columns</li>
<li>so, <code>col-*-6</code> spans 6 of 12 columns (half the width), <code>col-*-12</code> spans 12 of 12 columns (the entire width), etc</li>
</ul>

So, if you want two equal columns to span a div, write

<pre><code>&lt;div class="col-xs-6"&gt;Column 1&lt;/div&gt;
&lt;div class="col-xs-6"&gt;Column 2&lt;/div&gt;
</code></pre>

Or, if you want three unequal columns to span that same width, you could write:

<pre><code>&lt;div class="col-xs-2"&gt;Column 1&lt;/div&gt;
&lt;div class="col-xs-6"&gt;Column 2&lt;/div&gt;
&lt;div class="col-xs-4"&gt;Column 3&lt;/div&gt;
</code></pre>

You'll notice the # of columns always add up to 12. It can be less than twelve, but beware if more than 12, as your offending divs will bump down to the next row (not <code>.row</code>, which is another story altogether).

You can also nest columns within columns, (best with a <code>.row</code> wrapper around them) such as:

<pre><code>&lt;div class="col-xs-6"&gt;
 &lt;div class="row"&gt;
 &lt;div class="col-xs-4"&gt;Column 1-a&lt;/div&gt;
 &lt;div class="col-xs-8"&gt;Column 1-b&lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-xs-6"&gt;
 &lt;div class="row"&gt;
 &lt;div class="col-xs-2"&gt;Column 2-a&lt;/div&gt;
 &lt;div class="col-xs-10"&gt;Column 2-b&lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;
</code></pre>

Each set of nested divs also span up to 12 columns of their parent div. NOTE: Since each <code>.col</code> class has 15px padding on either side, you should usually wrap nested columns in a <code>.row</code>, which has -15px margins. This avoids duplicating the padding and keeps the content lined up between nested and non-nested col classes.

-- You didn't specifically ask about the <code>xs, sm, md, lg</code> usage, but they go hand-in-hand so I can't help but touch on it... 

In short, they are used to define at which screen size that class should apply:

<ul>
<li>xs = extra small screens (mobile phones)</li>
<li>sm = small screens (tablets)</li>
<li>md = medium screens (some desktops)</li>
<li>lg = large screens (remaining desktops)</li>
</ul>

<blockquote>
 Read the <a href="https://getbootstrap.com/docs/4.0/layout/grid/#grid-options" rel="noreferrer">"Grid
 Options"</a>
 chapter from the official Bootstrap documentation for more details.
</blockquote>

You should usually classify a div using multiple column classes so it behaves differently depending on the screen size (this is the heart of what makes bootstrap responsive). eg: a div with classes <code>col-xs-6</code> and <code>col-sm-4</code> will span half the screen on the mobile phone (xs) and 1/3 of the screen on tablets(sm). 

<pre><code>&lt;div class="col-xs-6 col-sm-4"&gt;Column 1&lt;/div&gt; &lt;!-- 1/2 width on mobile, 1/3 screen on tablet) --&gt;
&lt;div class="col-xs-6 col-sm-8"&gt;Column 2&lt;/div&gt; &lt;!-- 1/2 width on mobile, 2/3 width on tablet --&gt;
</code></pre>

NOTE: as per comment below, grid classes for a given screen size apply to that screen size and larger unless another declaration overrides it (i.e. <code>col-xs-6 col-md-4</code> spans 6 columns on <code>xs</code> and <code>sm</code>, and 4 columns on <code>md</code> and <code>lg</code>, even though <code>sm</code> and <code>lg</code> were never explicitly declared)

NOTE: if you don't define <code>xs</code>, it will default to <code>col-xs-12</code> (i.e. <code>col-sm-6</code> is half the width on <code>sm</code>, <code>md</code> and <code>lg</code> screens, but full-width on <code>xs</code> screens).

NOTE: it's actually totally fine if your <code>.row</code> includes more than 12 cols, as long as you are aware of how they will react. --This is a contentious issue, and not everyone agrees.

blocks|key|2739497|text|要点是这样的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2739498|col-lg-*+col-md-*+col-xs-*+col-sm定义了在这些不同的屏幕尺寸中将有多少列。|offset|length|style|CODE|2739499|示例:如果您希望在桌面屏幕和电话屏幕中有两列，您可以在列中放置两个col-md-6和两个col-xs-6类。|2739500|如果你想在桌面屏幕上有两列，而在手机屏幕上只有一列(即两行堆叠在一起)，你可以在你的列中放入two+col-md-6和两个col-xs-12，因为sum将是24，所以它们将自动堆叠在一起，或者干脆省去xs样式。|2739501|entityMap^0|0|0|8|9|8|I|8|R|6|0|X|8|18|8|0|1A|C|1P|9|2S|2|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@$D|P|E|Q|F|G]|$D|R|E|S|F|G]|$D|T|E|U|F|G]|$D|V|E|W|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|X|8|@$D|Y|E|Z|F|G]|$D|10|E|11|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|12|8|@$D|13|E|14|F|G]|$D|15|E|16|F|G]|$D|17|E|18|F|G]]|9|@]|A|$]]|$1|L|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|M|$]]

The main point is this:

<code>col-lg-*</code> <code>col-md-*</code> <code>col-xs-*</code> <code>col-sm</code> define how many columns will there be in these different screen sizes.

Example: if you want there to be two columns in desktop screens and in phone screens you put two <code>col-md-6</code> and two <code>col-xs-6</code> classes in your columns.

If you want there to be two columns in desktop screens and only one column in phone screens (ie two rows stacked on top of each other) you put <code>two col-md-6</code> and two <code>col-xs-12</code> in your columns and because sum will be 24 they will auto stack on top of each other, or just leave <code>xs</code> style out.

blocks|key|152440|text|来自Twitter+Bootstrap+documentation|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|152441|152442|小网格(≥768px)+=+.col-sm-*，|unordered-list-item|style|CODE|152443|中网格(≥992px)+=+.col-md-*，|152444|大网格(≥1200px)+=≥|152445|152446|to+Read+More...|152447|entityMap|0|LINK|mutability|MUTABLE|url|https://getbootstrap.com/docs/3.3/css/#grid-options|1|https://stackoverflow.com/questions/19865158/what-is-the-difference-among-col-lg-col-md-and-col-sm-in-twitter-bootstra^0|2|V|0|0|0|E|9|0|E|9|0|0|0|0|F|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|-4|5|6|7|14|8|@]|9|@]|C|$]]|$1|E|3|F|5|G|7|15|8|@$A|16|B|17|H|I]]|9|@]|C|$]]|$1|J|3|K|5|G|7|18|8|@$A|19|B|1A|H|I]]|9|@]|C|$]]|$1|L|3|M|5|G|7|1B|8|@]|9|@]|C|$]]|$1|N|3|-4|5|6|7|1C|8|@]|9|@]|C|$]]|$1|O|3|P|5|6|7|1D|8|@]|9|@$A|1E|B|1F|1|1G]]|C|$]]|$1|Q|3|-4|5|6|7|1H|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]|Y|$5|T|U|V|C|$W|Z]]]]

From <a href="https://getbootstrap.com/docs/3.3/css/#grid-options" rel="noreferrer">Twitter Bootstrap documentation</a>:

<ul>
<li>small grid (≥ 768px) = <code>.col-sm-*</code>,</li>
<li>medium grid (≥ 992px) = <code>.col-md-*</code>,</li>
<li>large grid (≥ 1200px) = <code>.col-lg-*</code>.</li>
</ul>

<a href="https://stackoverflow.com/questions/19865158/what-is-the-difference-among-col-lg-col-md-and-col-sm-in-twitter-bootstra">to Read More...</a>

blocks|key|156319|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|156320|引导网格系统有四个类：|blockquote|156321|156322|xs+(适用于手机)+sm+(适用于平板电脑)+md+(适用于台式机)+lg+(适用于较大的台式机)|offset|length|style|BOLD|156323|上面的类可以组合在一起来创建更动态、更灵活的布局。|156324|提示：每个类都会放大，所以如果你想为xs和sm设置相同的宽度，你只需要指定xs即可。|156325|156326|好的，答案很简单，但请继续阅读：|156327|col+lg-代表column+large+≥+1200px|CODE|156328|col+md-代表column+medium+≥+992px|156329|col-xs-代表column+extra+small+≥+768px|156330|像素数是断点，例如，当窗口比768px(likely移动设备小时，col-xs以元素为目标)……|156331|我还创建了下面的图像来展示网格系统是如何工作的，在这个例子中，我将它们与3一起使用，比如col-lg-6在页面中展示网格系统如何工作，看看lg，md和xs是如何响应窗口大小的：|156332|​|156333|📷|atomic|156334|156335|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/daf4fea0964c42a5290f5c29a47cb0a7.png|imageAlt^0|0|0|0|0|A|B|C|O|B|10|E|0|0|0|3|0|0|0|3|0|0|7|M|8|0|0|7|N|7|0|0|7|S|7|0|E|5|X|6|0|18|8|1X|2|20|2|23|2|0|0|0|1|0|0|0^^$0|@$1|2|3|-4|4|5|6|1H|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|1I|7|@]|8|@]|9|$]]|$1|D|3|-4|4|5|6|1J|7|@]|8|@]|9|$]]|$1|E|3|F|4|5|6|1K|7|@$G|1L|H|1M|I|J]|$G|1N|H|1O|I|J]|$G|1P|H|1Q|I|J]|$G|1R|H|1S|I|J]]|8|@]|9|$]]|$1|K|3|L|4|5|6|1T|7|@]|8|@]|9|$]]|$1|M|3|N|4|5|6|1U|7|@$G|1V|H|1W|I|J]]|8|@]|9|$]]|$1|O|3|-4|4|5|6|1X|7|@]|8|@]|9|$]]|$1|P|3|Q|4|5|6|1Y|7|@$G|1Z|H|20|I|J]]|8|@]|9|$]]|$1|R|3|S|4|5|6|21|7|@$G|22|H|23|I|J]|$G|24|H|25|I|T]]|8|@]|9|$]]|$1|U|3|V|4|5|6|26|7|@$G|27|H|28|I|J]|$G|29|H|2A|I|T]]|8|@]|9|$]]|$1|W|3|X|4|5|6|2B|7|@$G|2C|H|2D|I|J]|$G|2E|H|2F|I|T]]|8|@]|9|$]]|$1|Y|3|Z|4|5|6|2G|7|@$G|2H|H|2I|I|J]|$G|2J|H|2K|I|T]]|8|@]|9|$]]|$1|10|3|11|4|5|6|2L|7|@$G|2M|H|2N|I|T]|$G|2O|H|2P|I|T]|$G|2Q|H|2R|I|T]|$G|2S|H|2T|I|T]]|8|@]|9|$]]|$1|12|3|13|4|5|6|2U|7|@]|8|@]|9|$]]|$1|14|3|15|4|16|6|2V|7|@]|8|@$G|2W|H|2X|1|2Y]]|9|$]]|$1|17|3|13|4|5|6|2Z|7|@]|8|@]|9|$]]|$1|18|3|-4|4|5|6|30|7|@]|8|@]|9|$]]]|19|$1A|$4|1B|1C|1D|9|$1E|1F|1G|-4]]]]

<blockquote>
 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.
</blockquote>

OK, the answer is easy, but read on:

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

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

I also created the image below to show how the grid system works, in this examples I use them with 3, like <code>col-lg-6</code> to show you how the grid system work in the page, look at how <code>lg</code>, <code>md</code> and <code>xs</code> are responsive to the window size:

<a href="https://i.stack.imgur.com/S1RYa.png" rel="noreferrer"><img src="https://i.stack.imgur.com/S1RYa.png" alt="Bootstrap grid system, col-*-6"></a>

blocks|key|2952475|text|在这里你可以去|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2952476|col-lg-2+:如果屏幕很大(lg)，那么这个组件将占用2个元素的空间，考虑到整个行可以容纳12个元素(所以你会看到在大屏幕上这个组件占用一行空间的16%25+)|2952477|col-lg-6+:如果屏幕很大(lg)，那么这个组件将占用6元素的空间，考虑到整个行可以容纳12个元素--当应用时，您将看到该组件占用了行中可用空间的一半。|2952478|以上规则仅适用于屏幕较大的情况。当屏幕很小时，此规则将被丢弃，并且每行只显示一个组件。|2952479|下图显示了不同屏幕尺寸的宽度：|2952480|​|2952481|📷|atomic|2952482|2952483|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/39def99231e8fcf93257065dade0748f.png|imageAlt^0|0|7|0|H|2|U|2|0|H|2|U|1|0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|15|8|@$9|16|A|17|B|C]|$9|18|A|19|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1A|8|@$9|1B|A|1C|B|C]|$9|1D|A|1E|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|1F|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|1G|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|1H|8|@]|D|@]|E|$]]|$1|P|3|Q|5|R|7|1I|8|@]|D|@$9|1J|A|1K|1|1L]]|E|$]]|$1|S|3|O|5|6|7|1M|8|@]|D|@]|E|$]]|$1|T|3|-4|5|6|7|1N|8|@]|D|@]|E|$]]]|U|$V|$5|W|X|Y|E|$Z|10|11|-4]]]]

Here you go

col-lg-2 : if the screen is large (lg) then this component will take space of 2 elements considering entire row can fit 12 elements ( so you will see that on large screen this component takes 16% space of a row)

col-lg-6 : if the screen is large (lg) then this component will take space of 6 elements considering entire row can fit 12 elements -- when applied you will see that the component has taken half the available space in the row.

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 :

<a href="https://i.stack.imgur.com/QRM0O.png" rel="noreferrer"><img src="https://i.stack.imgur.com/QRM0O.png" alt="screen size definitions"></a>

I am confused with the grid system in the new Bootstrap, particularly these classes:

<pre><code>col-lg-*
col-md-*
col-xs-*
</code></pre>

(where * represents some number).

Can anyone please explain the following:

<ol>
<li>How that number is aligning the grids?</li>
<li>How to use these numbers?</li>
<li>What they actually represent?</li>
</ol>

Meaning of numbers in "col-md-4"," col-xs-1", "col-lg-2" in Bootstrap

我对新Bootstrap中的网格系统感到困惑，特别是这些类：col-lg-*col-md-*col-xs-*(其中*表示某个数字)。有没有人能解释一下：How该数字是对齐grids?How以使用它们实际表示这些numbers?What -

问Bootstrap中"col-md-4“、”col-xs-1“、"col-lg-2”中数字的含义
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap中"col-md-4“、”col-xs-1“、"col-lg-2”中数字的含义EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap中"col-md-4“、”col-xs-1“、"col-lg-2”中数字的含义
EN