栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局
.container (固定宽度)或 .container-fluid (100% 宽度)必须为最外层的div,以便为其赋予合适的排列(aligment)和内补(padding)。
.container (固定宽度)或 .container-fluid (100% 宽度)必须为最外层的div,以便为其赋予合适的排列(aligment)和内补(padding)。
container针对不同宽度的显示器设置为不同的宽度,这是通过媒体查询来实现的
超小屏幕(手机,小于 768px)
没有任何媒体查询相关的代码,因为这在 Bootstrap 中是默认的(还记得 Bootstrap 是移动设备优先的吗?)
小屏幕(平板,大于等于 768px)
@media (min-width: @screen-sm-min) { ... }
中等屏幕(桌面显示器,大于等于 992px)
@media (min-width: @screen-md-min) { ... }
大屏幕(大桌面显示器,大于等于 1200px)
@media (min-width: @screen-lg-min) { ... }
类似 .row 和 .col-xs-4 这种预定义的类,可以用来快速创建栅格布局,一行(row)最多分成12列
如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。
下面的例子当屏幕宽度小于992px时,会成一列,因为col-md-只对大于992px的屏幕进行渲染,当小于992时,未进行设置成为一列
设置不同浏览器中不同的列数
下面的例子中在
大屏幕(》1200px)上会显示四列
中等屏幕(≥992px)会显示三列
小屏幕(》768px)上会显示两列
超小屏幕(《768px)会显示两列
我在不同宽度浏览器中有不同的显示
我在不同宽度浏览器中有不同的显示
我在不同宽度浏览器中有不同的显示
我在不同宽度浏览器中有不同的显示
我在不同宽度浏览器中有不同的显示
我在不同宽度浏览器中有不同的显示
我在不同宽度浏览器中有不同的显示
我在不同宽度浏览器中有不同的显示
我在不同宽度浏览器中有不同的显示
我在不同宽度浏览器中有不同的显示
我在不同宽度浏览器中有不同的显示
我在不同宽度浏览器中有不同的显示
我在不同宽度浏览器中有不同的显示
列偏移--使用col-md-offset-1(单位md和数值自行设定)
嵌套列
我是9里面的3/12
我是9里面的3/12
我是9里面的3/12
我是9里面的3/12
3
列排序
col-md-push-* 该列向右移动*个单位
col-md-pull-* 该列向左移动*个单位
我本来应该在左边,可我在右边
我本来应该在右边,可我在左边
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
```