Bootstrap - 如何强制 col-xs-12 自定义最小浏览器 window 宽度？

Question

我有一些 Bootstrap 行和两列。像这样：

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

我想强制列执行 "col-xs-12" window 宽度 <= 720px。

如何实现？

Answer 1

默认行为是 col-xs-number class 在最小宽度的屏幕上工作，直到屏幕达到 768px。屏幕大于 768px 后转到 col-sm-number class。

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

这是最新 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%;
    }
 ...
}

Bootstrap - 如何强制 col-xs-12 自定义最小浏览器 window 宽度？

Bootstrap - How can I force col-xs-12 to custom minimum browser window width?

col

twitter-bootstrap-3