col-lg-* col-md-* col-xs-*
(其中*表示一些数字)
任何人都可以解释这个数字是如何对齐网格,以及如何使用这些数字,以及他们实际代表什么
解决方法
现在忽略字母(xs,sm,md,lg),我将从数字开始…
>数字(1-12)表示任何div的总宽度的一部分
>所有div分为12列
>所以,col – * – 6跨12列12列(宽度的一半),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,因为你的令人讨厌的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中,它有-15px的边距。这避免重复填充,并保持嵌套和非嵌套col类之间排列的内容。
– 你没有具体询问关于xs,sm,md,lg的用法,但他们手拉手,所以我不能帮助,但触摸它…
简而言之,它们用于定义应该应用的屏幕大小:
> xs =超小屏幕(手机)
> sm =小屏幕(平板电脑)
> md =中等屏幕(某些桌面)
> lg =大屏幕(剩余桌面)
你通常应该使用多个列类来对div进行分类,因此它会根据屏幕大小而有所不同(这是使引导响应的核心)。例如:类col-xs-6和col-sm-4的div将跨越移动电话(xs)屏幕的一半和平板电脑(sm)屏幕的1/3。
<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列, md和lg,即使sm和lg从未明确声明)
注意:如果不定义xs,它将默认为col-xs-12(即col-sm-6是sm,md和lg屏幕宽度的一半,而xs屏幕上是全宽)。
注意:如果你的.row包含超过12个cols,只要你知道他们会如何反应,它实际上是完全正确的。 – 这是一个有争议的问题,并不是每个人都同意。
– 我可以进一步向下进一步下来兔子孔与笔记和解释,但我希望这是一个很好的初步了解的基础…