在bootstrap布局中 为了使不同尺寸的页面可以显示不同个数的 element ，可以在元素上加上不同的栅格元素
<div class="container">
<div class="col-sm-6 col-md-4 col-lg-3"></div>
<div class="col-sm-6 col-md-4 col-lg-3"></div>
<div class="col-sm-6 col-md-4 col-lg-3"></div>
<div class="col-sm-6 col-md-4 col-lg-3"></div>
<div class="col-sm-6 col-md-4 col-lg-3"></div>
<div class="col-sm-6 col-md-4 col-lg-3"></div>
<div class="col-sm-6 col-md-4 col-lg-3"></div>
<div class="col-sm-6 col-md-4 col-lg-3"></div>
<div class="col-sm-6 col-md-4 col-lg-3"></div>
<div class="col-sm-6 col-md-4 col-lg-3"></div>
<div class="col-sm-6 col-md-4 col-lg-3"></div>
<div class="col-sm-6 col-md-4 col-lg-3"></div>
</div>通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。
| 超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
|---|---|---|---|---|
| 栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C | ||
.container 最大宽度 |
None （自动） | 750px | 970px | 1170px |
| 类前缀 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| 列（column）数 | 12 | |||
| 最大列（column）宽 | 自动 | ~62px | ~81px | ~97px |
| 槽（gutter）宽 | 30px （每列左右均有 15px） | |||
| 可嵌套 | 是 | |||
| 偏移（Offsets） | 是 | |||
| 列排序 | 是 | |||
媒体查询
在栅格系统中，我们在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值。
/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }我们偶尔也会在媒体查询代码中包含 max-width 从而将 CSS 的影响限制在更小范围的屏幕大小之内。
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }