20

如何在 Bootstrap 3 中关闭响应？

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

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

我想要的示例： 在此处输入图像描述

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

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

谢谢。

4

4 回答 4

46

编辑：我下面的代码是为 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;
}
于 2013-08-09T19:02:43.827 回答
13

这对我有用：

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

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

.container{
  width: 1150px !important;
}

在 iPad 和 iPhone 上进行了测试。

于 2013-11-18T05:04:01.407 回答
1

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

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

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

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

于 2013-08-12T11:11:41.507 回答
1

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

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

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

于 2013-10-04T16:46:50.307 回答