twitter-bootstrap 如何将 Twitter Bootstrap 3 用于无响应站点？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17943264/
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 use Twitter Bootstrap 3 for non-responsive site?
提问by Fred K
As you can read on their page, the new Bootstrap 3is "mobile first":
正如您在他们的页面上所读到的，新的Bootstrap 3是“移动优先”：
With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, Bootstrap is mobile first. Mobile first styles can be found throughout the entire library instead of in separate files.
在 Bootstrap 2 中，我们为框架的关键方面添加了可选的移动友好样式。使用 Bootstrap 3，我们从一开始就将项目重写为移动友好。它们没有添加可选的移动样式，而是直接嵌入到核心中。事实上，Bootstrap 是移动优先的。移动优先样式可以在整个库中找到，而不是在单独的文件中。
How can I disable the responsiveness? I want that my site will not rearrange itself for tablet or mobile.
如何禁用响应能力？我希望我的网站不会为平板电脑或手机重新排列。
回答by Fred K
For a more explained procedure see How to use Twitter Bootstrap 3 for non-responsive site
有关更多解释的过程，请参阅如何将 Twitter Bootstrap 3 用于无响应站点
From Bootstrap documentation(plus some explanations):
来自Bootstrap 文档（加上一些解释）：
To disable responsive features, follow these steps. See it in action in the modified template below.
1) Remove (or just don't add) the viewport
<meta>mentioned in the CSS docs
要禁用响应式功能，请按照以下步骤操作。在下面修改后的模板中查看它的实际效果。
1）删除（或只是不添加）
<meta>CSS文档中提到的视口
self-explanatory
不言自明
2) Remove the max-width on the
.containerfor all grid tiers with max-width: none !important; and set a regular width like width: 970px;. Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu.
2) 删除
.container所有具有 max-width: none !important; 的网格层的 max-width 并设置一个常规宽度，如 width: 970px;。确保这是在默认 Bootstrap CSS 之后。您可以选择避免使用媒体查询或某些选择器功能的 !important。
Add this style:
添加此样式：
.container{
max-width: none !important;
width: 970px;
}
3) If using navbars, undo all the navbar collapsing and expanding behavior (this is too much to show here, so peep the example).
3) 如果使用navbars，撤消所有的导航栏折叠和展开行为（这里展示的太多了，所以看看这个例子）。
Open variables.lessand set the variables:
打开variables.less并设置变量：
@grid-float-breakpointto 0
@grid-float-breakpoint到 0
@screen-xs-maxto 0(this will be fixed; read here)
@screen-xs-max到0（这将被修复；在这里阅读）
4) For grid layouts, make use of .col-xs-* classesin addition to or in place of the medium/large ones. Don't worry, the extra-small device grid scales up to all resolutions, so you're set there.
4) 对于网格布局，除了中/大类之外或代替中/大型类，请使用 .col-xs-* 类。不用担心，超小型设备网格可扩展到所有分辨率，因此您可以在那里进行设置。
self-explanatory
不言自明
You'll still need Respond.js for IE8 (since our media queries are still there and need to be picked up). This just disables the "mobile site" of Bootstrap.
您仍然需要用于 IE8 的 Respond.js（因为我们的媒体查询仍然存在并且需要被接收）。这只是禁用了 Bootstrap 的“移动站点”。
回答by Chris
Without major mods to the source, it just doesn't seem possible.
如果没有对源代码进行主要修改，这似乎是不可能的。
The following link details the changes needed: http://bassjobsen.weblogs.fm/compile-twitters-bootstrap-3-without-responsive-features/
以下链接详细说明了所需的更改：http: //bassjobsen.weblogs.fm/compile-twitters-bootstrap-3-without-responsive-features/
回答by Ozmodiar
The Bootstrap 3 docs actually contain a paragraph for this issue: http://getbootstrap.com/getting-started/#disable-responsive
Bootstrap 3 文档实际上包含一个针对此问题的段落：http: //getbootstrap.com/getting-started/#disable-responsive
回答by BMCwebdev
Well, I was looking for the same thing. I haven't checked it out yet, so I can't attest to it's functionality, but here is a version with responsive taken out:
嗯，我正在寻找同样的东西。我还没有检查出来，所以我不能证明它的功能，但这里有一个响应式删除的版本：
回答by Chris
Check out the answer here by Jay Douglass which details overriding the media query breakpoint variables to disable the responsive features. It's a simple solution that requires minimal change.
在此处查看 Jay Douglass 的答案，其中详细介绍了如何覆盖媒体查询断点变量以禁用响应功能。这是一个简单的解决方案，需要最少的更改。
回答by Caner ?ahin
With a small effort you can achieve that.
只需稍加努力，您就可以实现这一目标。
1) Remove viewport
1) 移除视口
2) Add .container{ max-width: none !important; width: 970px; }to your css file
2）添加.container{ max-width: none !important; width: 970px; }到你的css文件
3) If using navbars, undo all the navbar collapsing and expanding behavior
3) 如果使用导航栏，撤消所有导航栏折叠和展开行为
4)
4)
For grid layouts, make use of .col-xs-* classes in addition to or in place of the medium/large ones. Don't worry, the extra-small device grid scales up to all resolutions, so you're set there.
对于网格布局，除了中/大类之外，还可以使用 .col-xs-* 类。不用担心，超小型设备网格可扩展到所有分辨率，因此您可以在那里进行设置。
You can follow the link below:
您可以点击以下链接：
