Question

我试图寻找答案但无济于事。基本上我想知道的是，如果有必要在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>

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

Answer 1

你的直觉是正确的，你设置的最低值（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) { ... }

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

是否有必要在Bootstrap 3中添加col-md选择器？

1 个答案: