Bootstrap栅格化解析

来源：懂视网责编：小采时间：2020-11-27 18:50:03

Bootstrap栅格化解析

Bootstrap栅格化解析:版心(container)版心：class名为.container的容器，其版心的宽度在各个屏幕设备下是不一样的值，版心两边就是留白。各尺寸下版心宽度如下表：屏幕设备版心宽度max-width:768pxxs 继承父元素宽度（即width:100%）min-width:768pxsm 7

推荐度：

点击下载本文 文档为doc格式

导读Bootstrap栅格化解析:版心(container)版心：class名为.container的容器，其版心的宽度在各个屏幕设备下是不一样的值，版心两边就是留白。各尺寸下版心宽度如下表：屏幕设备版心宽度max-width:768pxxs 继承父元素宽度（即width:100%）min-width:768pxsm 7

版心(container)

版心：class名为.container的容器，其版心的宽度在各个屏幕设备下是不一样的值，版心两边就是留白。
各尺寸下版心宽度如下表：
屏幕设备版心宽度
max-width:768px xs 继承父元素宽度（即width:100%）
min-width:768px sm 750px
min-width:992px md 970px
min-width:1200px lg 1170px

屏幕设备	版心宽度
max-width:768px	xs 继承父元素宽度（即width:100%）
min-width:768px	sm 750px
min-width:992px	md 970px
min-width:1200px	lg 1170px

.container {
 padding-right: 15px;
 padding-left: 15px;
 margin-right: auto;
 margin-left: auto;
}@media (min-width: 768px) {
 .container {
 width: 750px;
 }}
@media (min-width: 992px) {
 .container {
 width: 970px;
 }}
@media (min-width: 1200px) {
 .container {
 width: 1170px;
 }}
.container-fluid {
 padding-right: 15px;
 padding-left: 15px;
 margin-right: auto;
 margin-left: auto;
}

不管什么宽度的屏幕，版心容器.container总会有左右15px的padding，是为了让内容不直接紧贴浏览器边缘的。在一个container中永远不要再嵌套一个container.
.container-fluid的版心容器跟小于768px屏幕的版心一样，自己没有设置固定宽度值，继承其父元素的宽度。
.container容器是用来在响应式宽度上提供宽度约束。响应尺寸的改变其实改变的是container,行（row）和列（column）都是基于百分比的所以它们不需要做任何改变。

行（row）

行：class名为.row的容器；它为列（col）一共了空间，总共分为12列。
row两端会有两个负的15px的margin值，为了抵消掉container两侧的padding值。.row在container外使用时无效的。

.row {
 margin-right: -15px;
 margin-left: -15px;
}

列（column）

每一列都有两侧15px的padding值。永远不要在.row容器外使用col,否则col是无效的。
每列col的padding值给其内容提供了空白，使内容不会紧贴在浏览器边缘，列之间也不会紧贴在一起。
==列都是按照百分比分配的(相对于版心宽度的百分比，所以版心越宽的，每列宽度就越大)==。

//五列的宽度
.col-xs-5 {
 width: 41.66666667%;
}// 四列的宽度
.col-xs-4 {
 width: 33.33333333%;
}// 三列的宽度
.col-xs-3 {
 width: 25%;
}// 占两列的宽度
.col-xs-2 {
 width: 16.66666667%;
}// 每列的宽度是版心宽度的8.33333333%
.col-xs-1 {
 width: 8.33333333%;
}...
// 如果是中等屏幕 类名为.col-md-1
// 小屏幕 类名为：.col-sm-1
// 大屏幕 类名为：.col-lg-1
@media (min-width:768px) {
 .col-sm-1 {
 width: 8.33333333%;
 }
 .col-sm-2 {
 width: 16.66666667%;
 }
 ...
}
@media (min-width: 992px) {
 .col-md-1 {
 width: 8.33333333%;
 }
 .col-md-2 {
 width: 16.66666667%;
 }
 ...
}
@media (min-width:1200px) {
 .col-lg-1 {
 width: 8.33333333%;
 }
 .col-lg-2 {
 width: 16.66666667%;
 }
 ...
}

栅格嵌套

当设置了 container/row/column之后,可以在column内再创建新的栅格系统，在column里面直接再添加row就可以了，不需要再套container了，因为列的两侧padding值正好可以抵消row的两侧负的margin值，列相当于container了。

偏移（offsets）

偏移offset主要是靠列的margin-left值决定。偏移一列的话就是margin-left:8.3333333%(1/12),偏移两列就是margin-left:16.66666667%(即2/12);

.col-xs-offset-0 {
 margin-left: 0;
}.col-xs-offset-1 {
 margin-left: 8.33333333%;
}...
@median (min-width:768px) {
 .col-sm-offset-0 {
 margin-left: 0;
 }
 .col-sm-offset-1 {
 margin-left: 8.33333333%;
 }
 ...
}
...

列的排序（Push 和 Pull）

在实际应用中更多表现的是呼唤位置和进行排序，允许你打破html中p从上到下从左到右的固定布局。
pull 和 push 是通过position的 right 和 left值实现的，pull是通过right值，pull-1值 right:8.33333333% (1/12); push-1值=> left:8.33333333%(1/12);

// push 距离左边的距离（向右推的列数）以最小屏为例
.col-xs-push-2 {
 left: 16.66666667%;
}.col-xs-push-1 {
 left: 8.33333333%;
}.col-xs-push-0 {
 left: auto;
}...

// pull 距离右边的距离（向左拉的列数）以最小屏为例
.col-xs-pull-2 {
 right: 16.66666667%;
}.col-xs-pull-1 {
 right: 8.33333333%;
}.col-xs-pull-0 {
 right: auto;
}