14

我试图寻找这个问题的答案无济于事。基本上我想知道的是是否有必要在 Bootstrap 3 中指定 col-md-* 值，或者你是否可以使用 col-xs-12 和 col-sm-* 并拥有 col-sm -* 值决定了 col 大小一直到一些大型显示器。

这似乎很简单（拥有 col-sm 就可以了），但文档也包含看似多余的 col-md-* 值，例如此处（取自“示例：移动设备、平板电脑和桌面设备”下的“网格系统”在 CSS 部分：

<div class="row">
  <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
  <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs"></div>
  <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
</div>

任何澄清在这里将不胜感激。谢谢！

4

1 回答 1

15

您的直觉是正确的，您设置的最低值（xs、sm 或 md）将决定更大的屏幕尺寸；这意味着如果您希望您的 div 从小型设备开始跨越 4 列并一直向上，您只需设置.col-sm-4.

由于媒体查询的设置方式，它以这种方式工作：

/* Extra small devices (phones, up to 480px) */ 
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */ 
@media (min-width: @screen-tablet) { ... }

/* Medium devices (desktops, 992px and up) */ 
@media (min-width: @screen-desktop) { ... }

/* Large devices (large desktops, 1200px and up) */ 
@media (min-width: @screen-large-desktop) { ... }

如果没有被覆盖，小型设备的类也将适用于更大的屏幕

于 2013-08-16T22:47:02.453 回答