bootstrap之 container container-fluid row col

media是做响应式布局的关键。

html是从左到右，从上到下的布局。从上到下的布局是好处理的。但是从左到到右的布局不是太好处理.固定大小还好，不固定大小处理起来就蛋疼了。。。

但是bootstrap是好人。它帮你做了。通过核心col-xs-n, col-sm-n, col-md-n, col-lg-n来处理。

.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;
}

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

.col-xx-n{
　　position: relative;
　　min-height: 1px;
　　padding-right: 15px;
　　padding-left: 15px;
}
.col-xx-n{
　　float: left;
}
.col-xs-n {
　　width: (n/12 * 100)%;
}

container与container-fluid都是做了居中处理。container的宽度是固定的。

@media (min-width: 1200px) 窗口的最小宽度为1200px