如何从 Twitter Bootstrap 3 完全关闭响应功能? [英] How to turn off the responsive feature completely from Twitter Bootstrap 3?

问题描述

如何在 Bootstrap 3 中关闭响应?

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

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

我想要的例子:

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

最近还读到，在 Bootstrap 2.0 中，您只是删除了响应式 boostrap CSS，但在 3.0 中，它被整合到一个 css 文件中.

谢谢.

解决方案

我下面的代码是为 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:

<!-- 根本不要使用 .container 否则你将不得不使用覆盖了很多响应式样式.--><div class="container-non-responsive"><div class="row"><div class="col-xs-4"><h1>欢迎来到无响应土地</h1>

<div class="col-xs-8"><!-- 更多内容，更多内容-->

CSS:

.container-non-responsive {/* 从 Bootstrap 复制的边距/填充 */左边距:自动；右边距:自动；左边距:15px；padding-right: 15px;/* 将宽度设置为您想要的站点宽度 */宽度:1170px；}

How can I turn off responsiveness in Bootstrap 3?

I just want to develop a desktop version and when the size is different it should still appear like the desktop version.

Twitter.com does this. If you try to resize, nothing happens to the UI while my site is redesigning all the elements.

Example of how I want it:

Anyway now how to turn off the responiveness? All help appreciated.

Also recently read that in Bootstrap 2.0 you just remove responive boostrap CSS, but in 3.0 its baked into one css file.

Thanks.

解决方案

EDIT: My code below was written for v3.0.0RC2, but in v3.0.0 the docs got a section specifically about this question: http://getbootstrap.com/getting-started/#disable-responsive

Use the col-xs-X classes since they are constant percentage widths. Then the responsiveness comes from .container using max-width at different media sizes. You can define your own alternative to .container and use everything else like normal:

Fiddle for the example below: 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;
}

这篇关于如何从 Twitter Bootstrap 3 完全关闭响应功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！