twitter-bootstrap-3 - Bootstrap - 如何强制 col-xs-12 自定义最小浏览器窗口宽度？

Question

我有一些两列的引导行。像这样的东西：

<div class="row">
  <div class="col-xs-12 col-sm-6">...</div>
  <div class="col-xs-12 col-sm-6">...</div>
</div>

我想强制列以窗口宽度<= 720px 执行“col-xs-12”。

如何做到这一点？

Answer 1

默认行为是col-xs-number该类在最小宽度的屏幕上工作，直到屏幕达到 768 像素。屏幕大于 768px 后，它就可以col-sm-number上课了。

因此，如果您希望 xs 用于屏幕直到 720px 并且 sm 从 720px 到默认 992px（col-md-number类来自哪里），您需要进入 Bootstrap 的 css 文件并编辑@media (min-width: 768px) {}所有col-sm-number类的内容。

这是最新 Bootstrap 版本 (v3.3.5) 的示例。如果您打开 bootstrap.css 文件，它将从第 1778 行开始，一直到第 1936 行。

@media (min-width: 720px) {
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
        float: left;
    }
    .col-sm-12 {
         width: 100%;
    }
    .col-sm-11 {
         width: 91.66666667%;
    }
    .col-sm-10 {
         width: 83.33333333%;
    }
 ...
}