我试图寻找一个答案没有效果.基本上我想知道的是,如果需要在Bootstrap 3中指定一个col-md- *值,或者您可以使用col-xs-12和col-sm- *并且具有col-sm – *值指示col大小一直到一些巨大的显示.
这似乎是一个没有脑子的人(那可能会很好),但是这些文档还包括看似冗余的col-md- *值,例如这里(取自“示例：手机,平板电脑和桌面”在“ CSS部分中的“Grid System”
<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>
这里的任何澄清将不胜感激.谢谢！
解决方法
您的直觉是正确的,您设置的最低值(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) { ... }
如果不覆盖,小型设备的课程也适用于较大的屏幕