Bootstrap 3 响应式设计

Question

当我将Bootstrap 3用于响应式设计网站时，如果我只使用一种类型的class就可以了，例如col-lg-*到我的整个页面，然后, 使用 CSS 中的媒体查询来重新设计页面以降低尺寸？

Answer 1

Bootstrap 工作 移动优先 所以你应该使用它。您可以向每一列添加多个 类，使它们在每个尺寸上看起来都不同：

<div class="row">
    <div class="col-sm-6 col-md-3">X</div>
    <div class="col-sm-6 col-md-3">X</div>
    <div class="col-sm-6 col-md-3">X</div>
    <div class="col-sm-6 col-md-3">X</div>
</div>

这将导致：

Mobile:
|             100%            |
|             100%            |
|             100%            |
|             100%            |

Tablet:
|     50%     | |     50%     |
|     50%     | |     50%     |

Desktop:
| 25% | | 25% | | 25% | | 25% |

编写自定义 CSS 时，您应该始终从移动版本开始，然后使用 min-width 编写媒体查询以定位更高维度：

button { display: block; }

/* Tablet and higher */

@media (min-width: 768px) {
    button { display: inline-block; }
}