在 Bootstrap 3 中禁用响应式网格的问题

Question

我需要在 Bootstrap 中禁用响应式布局，但我遇到了一些问题。

我将元标记替换为：

content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"

并将容器中的网格初始化替换为：

.container {
  .container-fixed();

  @media (min-width: 200px) {
    width: @container-lg;
  }

  @media (min-width: @screen-xs-min) {
    width: @container-lg;
  }

  @media (min-width: @screen-sm-min) {
    width: @container-lg;
  }
  @media (min-width: @screen-md-min) {
    width: @container-lg;
  }
  @media (min-width: @screen-lg-min) {
    width: @container-lg;
  }

  // min-width: 980px !important;
}

但我在我的代码中看到了一些显示分辨率小问题：
http://www.playground.obuh.by/

我做错了什么？

Answer 1

来自Bootstrap's Documentation on Disabling Responsiveness

1. 省略 CSS 文档中提到的视口 <meta>
2. 为每个网格层覆盖.container 上的width，使其具有单个宽度，例如宽度：970px !important; 确保它位于默认的 Bootstrap CSS 之后。您可以选择使用媒体查询或某些选择器来避免 !important。
3. 如果使用导航栏，请移除所有导航栏折叠和展开行为。
4. 对于网格布局，使用.col-xs-* 类补充或代替中/大类。不用担心，超小的设备网格可以扩展到所有分辨率。

特别要注意#4。如果你只使用col-xs，你仍然可以使用网格布局，但在不同的屏幕尺寸上看不到变化。