twitter-bootstrap - 如何从 Twitter Bootstrap 3 中完全关闭响应功能？

Question

这个问题在这里已经有了答案:





How to remove responsive features in Twitter Bootstrap 3?

(8 个回答)


8年前关闭。




如何在 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并像平常一样使用其他一切:

fiddle 下面的例子: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;
}