bootstrap 右自适应 左_bootstrap是怎么实现自适应的？

自适应： 不管屏幕多大，都尽量不换行，而只是横向缩放。而Boostrap是通过“栅栏系统”实现自适应的。

栅栏系统是通过定义容器大小，并将其等分12份，通过一系列行(row)与列(column)，结合媒体查询制作成强大的响应式栅格系统。

Boostrap自适应功能的基础就是“栅栏"模式，它是将浏览器以行列形式去划分：一共12列，行数自定义，根据你所要显示的元素，确定每个元素显示的大小即需要的列数，如果超过范围，就会自动转行。每列的大小是Boostrap根据当前浏览器的大小自动平均分配。

工作原理：数据行(row)必须包含在 .container(固定宽度) 或 .container-fluid(100%宽度)中。以便为其赋予合适的排列(aligment)和内补(padding)。

通过行(row)在水平方向上创建一组列(column)，随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列。。

通过列(row)设置padding属性来创建列之间的间隔。通过.row设置负值margin从而抵消.container元素设置的padding(简介为行(row)所包含的列(column)抵消padding，也即后面实例中向外突出的原因)。

超过12列，多余的列另起一行

栅栏参数表：.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;

}

如上，栅栏系统最外层区分了四种宽度的浏览器：DescribeWidthClass Prefix超小屏<768px(auto).col-xs-

小屏>=768px(750ox).col-sm-

中屏>=992px(970px).col-md-

大屏>=1200px(1170px).col-lg-

基本用法：

创建一个响应式行：

...

1.通过更改数字合并列(列总和<=12)

.col-md-4

.col-md-8

.col-md-4

.col-md-4

.col-md-4

.col-md-6

.col-md-6

2.列排序

改变列的方向，就是改变左右浮动，并且设置浮动的距离。(通过添加类名“col-md-push-number”和“col-md-pull-number”)

.col-md-4

.col-md-8

3.列的嵌套

col-md-6

col-md-6

col-md-4

更多web开发知识，请查阅 HTML中文网 ！！