twitter-bootstrap 如何从 Twitter Bootstrap 3 完全关闭响应功能？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18146476/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to turn off the responsive feature completely from Twitter Bootstrap 3?
提问by user023
How can I turn off responsiveness in Bootstrap 3?
如何在 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.
Twitter.com 就是这样做的。如果您尝试调整大小，当我的网站重新设计所有元素时，UI 不会发生任何变化。
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.
最近还读到，在 Bootstrap 2.0 中，您只是删除了响应式 boostrap CSS，但在 3.0 中，它被整合到了一个 css 文件中。
Thanks.
谢谢。
回答by Ross Allen
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
编辑：我下面的代码是为 v3.0.0RC2 编写的，但在 v3.0.0 中，文档有一个专门关于这个问题的部分：http://getbootstrap.com/getting-started/#disable-responsive
Use the col-xs-Xclasses since they are constant percentage widths. Then the responsiveness comes from .containerusing max-widthat different media sizes. You can define your own alternative to .containerand use everything else like normal:
使用这些col-xs-X类，因为它们是恒定的百分比宽度。然后响应性来自.container使用max-width不同的媒体尺寸。您可以定义自己的替代方案.container并像平常一样使用其他所有内容：
Fiddle for the example below: http://jsfiddle.net/xTePL/
小提琴下面的例子：http: //jsfiddle.net/xTePL/
HTML:
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:
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;
}
回答by machineboy2045
Here's what worked for me:
这是对我有用的：
<meta name='viewport' content='width=1190'>
I wanted a bit of a margin around my content so I also did
我想在我的内容周围留出一点余量，所以我也做了
.container{
width: 1150px !important;
}
Tested it on iPad and iPhone.
在 iPad 和 iPhone 上进行了测试。
回答by Bass Jobsen
I like the (accepted) solution of @ssorallen. This solution don't turn of all responsive features off as asked.
我喜欢@ssorallen的（接受的）解决方案。此解决方案不会按要求关闭所有响应功能。
The @grid-float-breakpoint(default at 768px) will let your menu collapse and sets the alignment of form labels based on screen width. The width of your modals and carousels depend on this setting also.
将@grid-float-breakpoint（在768px默认）将让你的菜单崩溃，并基于屏幕宽度表单标签的对齐方式。模态框和轮播图的宽度也取决于此设置。
For more information, see: http://bassjobsen.weblogs.fm/compile-twitters-bootstrap-3-without-responsive-features/
有关更多信息，请参阅：http: //bassjobsen.weblogs.fm/compile-twitters-bootstrap-3-without-responsive-features/
updatecheck the link below from @skelly too. Note this still don't change the grid-float-breakpoint neither does this solution reduce code. Further versions of TB3 will split up some less filesmaybe. This will make it easier to compile a non-responsive version.
更新也从@skelly 检查下面的链接。请注意，这仍然不会更改 grid-float-breakpoint，此解决方案也不会减少代码。TB3 的其他版本可能会拆分更少的文件。这将使编译无响应版本更容易。
回答by Sharma
Just search for disable all media queries and comment them out in the bootstrap.css file. It doesn't take more than a few minutes.
只需搜索禁用所有媒体查询并在 bootstrap.css 文件中将它们注释掉即可。不会超过几分钟。
Then you need to set a fixed width to the outer div that sets your page content. This is usually .container in bootstrap or something like #wrapper is also common. 960px or what ever is right for your site.
然后，您需要为设置页面内容的外部 div 设置固定宽度。这通常是引导程序中的 .container 或类似 #wrapper 的东西也很常见。960px 或任何适合您网站的尺寸。
You also need to remove or comment out the meta viewport tag in your HTML head. If there isn't one then that's also fine (although you will need to add one to make if you want it responsive). It looks like this:
您还需要删除或注释掉 HTML 头中的元视口标记。如果没有，那也没关系（尽管如果您希望它具有响应性，则需要添加一个）。它看起来像这样：
