bootstrap 提供多端解决方案，响应式布局 列 column #### ** 这个也很简单，你看总共有那么宽，Bootstrap分别将他们分割成12份，意思是你可以随意使用者12份，加起来要正好12。**  不过要注意的一点是，Bootstrap实现了更好的响应式布局，列的种类是有很多种的。 **.col-xs-\***针对超小屏幕 手机（<768px） **.col-sm-\***小屏幕 平板 (≥768px) **.col-md-\***中等屏幕 桌面显示器 (≥992px)(栅格参数) **.col-lg-\***针对特大的（≥1200px） **这些是什么意思？如何使用的呢？假设你写如下代码: ** ~~~ <div class="col-sm-10 col-md-8"></div> <div class="col-sm-3 col-md-4"></div> ~~~ 以一个容器container ``` .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 768px) {/*当宽度大于768px时触发*/ .container { width: 750px; } } @media (min-width: 992px) {/*当宽度大于992px时触发*/ .container { width: 970px; } } @media (min-width: 1200px) {/*当宽度大于1200px时触发*/ .container { width: 1170px; } } .container-fluid { /*这个是宽度默认*/ padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } ```