如何从Twitter Bootstrap 3完全关闭响应功能？

Question

如何在Bootstrap 3中关闭响应？

我只是想开发一个桌面版本，当尺寸不同时，它应该仍然像桌面版本一样。

Twitter.com做到这一点。如果您尝试调整大小，当我的网站重新设计所有元素时，UI没有任何反应。

我想要它的示例：

无论如何现在如何关闭响应？所有帮助表示赞赏。

最近还读到，在Bootstrap 2.0中你只需要删除响应的boostrap CSS，但是在3.0中它会被整合到一个css文件中。

感谢。

Answer 1

编辑：我的代码是针对v3.0.0RC2编写的，但是在v3.0.0中，文档专门针对此问题进行了部分编写：http://getbootstrap.com/getting-started/#disable-responsive

使用col-xs-X类，因为它们是恒定的百分比宽度。然后，响应性来自.container使用不同媒体大小的max-width。您可以定义自己的.container替代方案，并使用其他所有方法：

以下示例的小提琴：http://jsfiddle.net/xTePL/

HTML：

<!-- Don't use .container at all or you will have to
     override a lot of responsive styles. -->
<div class="container-non-responsive">
  <div class="row">
    <div class="col-xs-4">
      <h1>Welcome to Non-responsive Land</h1>
    </div>
    <div class="col-xs-8">
      <!-- More content, more content -->
    </div>
  </div>
</div>

CSS：

.container-non-responsive {
  /* Margin/padding copied from Bootstrap */
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;

  /* Set width to your desired site width */
  width: 1170px;
}

Answer 2

这对我有用：

<meta name='viewport' content='width=1190'>

我想在我的内容周围留一点余地，所以我也做了

.container{
  width: 1150px !important;
}

在iPad和iPhone上测试过。

Answer 3

我喜欢@ssorallen的（已接受）解决方案。该解决方案并未按要求关闭所有响应功能。

@grid-float-breakpoint（默认为768像素）会让您的菜单折叠，并根据屏幕宽度设置表单标签的对齐方式。模态和轮播的宽度也取决于此设置。

有关详细信息，请参阅：http://bassjobsen.weblogs.fm/compile-twitters-bootstrap-3-without-responsive-features/

更新也检查@skelly下面的链接。请注意，这仍然不会更改grid-float-breakpoint，此解决方案也不会减少代码。 TB3的其他版本可能会split up some less files。这样可以更轻松地编译非响应版本。

Answer 4

只需搜索禁用所有媒体查询并在bootstrap.css文件中注释掉它们。它不会超过几分钟。

然后，您需要将固定宽度设置为设置页面内容的外部div。这通常是引导程序中的.container或类似#wrapper的常见问题。 960px或适合您网站的内容。

您还需要删除或注释HTML头中的元视口标记。如果没有那个那么那也没关系（尽管如果你想让它响应，你需要添加一个）。它看起来像这样：