twitter-bootstrap – 是否有必要在Bootstrap 3中添加col-md选择

发布时间：2020-12-18 00:18:42 所属栏目：安全来源：网络整理

导读：我试图寻找一个答案没有效果.基本上我想知道的是,如果需要在Bootstrap 3中指定一个col-md- *值,或者您可以使用col-xs-12和col-sm- *并且具有col-sm – *值指示col大小一直到一些巨大的显示. 这似乎是一个没有脑子的人(那可能会很好),但是这些文档还包括看似

我试图寻找一个答案没有效果.基本上我想知道的是,如果需要在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) { ... }

如果不覆盖,小型设备的课程也适用于较大的屏幕

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!