.show-grid [class^=col-] {
padding-top: 10px;
padding-bottom: 10px;
background-color: #eee;
background-color: rgba(86,61,124,.15);
border: 1px solid #ddd;
border: 1px solid rgba(86,61,124,.2);
}
.show-grid {
margin-bottom: 15px;
}
格栅
超小屏幕
手机 (<768px)
小屏幕
平板 (≥768px)
中等屏幕
桌面显示器 (≥992px)
大屏幕
大桌面显示器 (≥1200px)
栅格系统行为总是水平排列开始是堆叠在一起的,当大于这些阈值时将变为水平排列C.container
最大宽度None (自动)750px970px1170px类前缀
.col-xs-
.col-sm-
.col-md-
.col-lg-
列(column)数12最大列(column)宽自动~62px~81px~97px槽(gutter)宽30px (每列左右均有 15px)可嵌套是偏移(Offsets)是列排序是
从堆叠到水平排列
使用单一的一组 .col-md-*
栅格类,就可以创建一个基本的栅格系统,在手机和平板设备上一开始是堆叠在一起的(超小屏幕到小屏幕这一范围),在桌面(中等)屏幕设备上变为水平排列。所有“列(column)必须放在 ” .row
内。
移动设备和桌面屏幕
是否不希望在小屏幕设备上所有列都堆叠在一起?那就使用针对超小屏幕和中等屏幕设备所定义的类吧,即 .col-xs-*
和 .col-md-*
。请看下面的实例,研究一下这些是如何工作的。
手机、平板、桌面
在上面案例的基础上,通过使用针对平板设备的 .col-sm-*
类,我们来创建更加动态和强大的布局吧。
多余的列(column)将另起一行排列
如果在一个 .row
内包含的列(column)大于12个,包含多余列(column)的元素将作为一个整体单元被另起一行排列。
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
Subsequent columns continue along the new line.
响应式列重置
即便有上面给出的四组栅格class,你也不免会碰到一些问题,例如,在某些阈值时,某些列可能会出现比别的列高的情况。为了克服这一问题,建议联合使用 .clearfix
和 响应式工具类。
.col-xs-6 .col-sm-3
Resize your viewport or check it out on your phone for an example.
列偏移
使用 .col-md-offset-*
类可以将列向右侧偏移。这些类实际是通过使用 *
选择器为当前元素增加了左侧的边距(margin)。例如,.col-md-offset-4
类将 .col-md-4
元素向右侧偏移了4个列(column)的宽度。
嵌套列
为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .row
元素和一系列 .col-sm-*
元素到已经存在的 .col-sm-*
元素内。被嵌套的行(row)所包含的列(column)的个数不能超过12(其实,没有要求你必须占满12列)。
Level 1: .col-sm-9
Level 2: .col-xs-8 .col-sm-6
Level 2: .col-xs-4 .col-sm-6
列排序
通过使用 .col-md-push-*
和 .col-md-pull-*
类就可以很容易的改变列(column)的顺序。
一键复制
编辑
Web IDE
原始数据
按行查看
历史