如何从 Twitter Bootstrap 3 中完全关闭响应功能？ [复制]答案

【问题标题】：How to turn off the responsive feature completely from Twitter Bootstrap 3? [duplicate]如何从 Twitter Bootstrap 3 中完全关闭响应功能？ [复制]
【发布时间】：2014-04-07 22:18:25
【问题描述】：

如何在 Bootstrap 3 中关闭响应？

我只是想开发一个桌面版本，当大小不同时，它仍然应该看起来像桌面版本。

Twitter.com 就是这样做的。如果您尝试调整大小，当我的网站重新设计所有元素时，UI 不会发生任何变化。

我想要的示例：

无论如何现在如何关闭响应？感谢所有帮助。

最近还读到，在 Bootstrap 2.0 中，您只需删除响应式 boostrap CSS，但在 3.0 中，它被烘焙到一个 css 文件中。

谢谢。

【问题讨论】：

只需在.row 中使用.col-lg-，而不是.col-sm 或.col。您可以做的其他事情是简单地搜索 @media 呼叫并删除它们并全部删除。
感谢您的回复。我已经在 .row 中使用了 .col-lg- ，但它仍然会响应。还试图删除@media 的东西。没有区别。
.col-lg-X 和 .col-sm-X 类改变宽度并停止浮动在不同的媒体宽度。您想坚持使用普通的 .col-X 类，它们始终浮动并且具有不变的百分比宽度，不会因媒体而改变。看看我下面的答案是不是你想要的。
在 3.0 完整版本中，Bootstrap 团队在文档中添加了一个部分来描述如何实现这一点：getbootstrap.com/getting-started/#disable-responsive

标签： twitter-bootstrap responsive-design twitter-bootstrap-3

【解决方案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;
}

【讨论】：

对于 v3.0.0RC2，col-X 类应该替换为 col-xs-X
这没有任何作用。你不能只在 .container 上设置一个宽度就完成了吗？
@Moss 不。还不知道为什么，但是仅仅设置宽度是行不通的。不过，Ssorallen 的回答很有魅力。谢谢！
当你使用 col-xs-* 时，相对宽度使内容响应。有什么解决办法吗？使用 col-xs-* 进行布局和位置很舒服。

【解决方案2】：

这对我有用：

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

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

.container{
  width: 1150px !important;
}

在 iPad 和 iPhone 上测试过。

【讨论】：

对不起，这在我的特殊情况下不起作用。

【解决方案3】：

我喜欢@ssorallen 的（已接受）解决方案。此解决方案不会按要求关闭所有响应式功能。

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

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

【讨论】：

Bootstrap 文档现在也提供了一些指导：getbootstrap.com/getting-started/#disable-responsive
@Skelly。感谢您添加此链接。此解决方案不会重置@grid-float-breakpoint，也不会减少代码。

【解决方案4】：

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

然后您需要为设置页面内容的外部 div 设置固定宽度。这通常是引导程序中的 .container 或类似 #wrapper 的东西也很常见。 960px 或任何适合您网站的尺寸。

您还需要删除或注释掉 HTML 头部中的元视口标签。如果没有，那也没关系（尽管如果您希望它具有响应性，则需要添加一个来制作）。它看起来像这样：

【讨论】：