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

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) { ... }

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