将宽度 1170px 与 bootstrap.css 一起使用（响应式）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9162257/
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
Using width 1170px with bootstrap.css (responsive)
提问by arbme
I noticed on the twitter docs for grid systemit says the default grid is 940px but it is 1170px on the website. I gather it is using responsive to change the width as I am on a widescreen and higer resolution.
我注意到在网格系统的推特文档上它说默认网格是 940 像素，但它在网站上是 1170 像素。我认为它正在使用响应来改变宽度，因为我在宽屏和更高的分辨率上。
My question falls down to how do I use 1170px like in twitter docs. I can't seem to find any docs explaining how to change the width to 1170px like they have. Is this a custom build they have made but not released or just not updated the docs?
我的问题归结为如何使用 1170px 就像在 twitter 文档中一样。我似乎找不到任何文档来解释如何像他们一样将宽度更改为 1170px。这是他们制作但未发布或只是未更新文档的自定义构建吗？
Any ideas how to implement this and have the correct grid customization vars for 1170px.
任何想法如何实现这一点并为 1170px 设置正确的网格自定义变量。
Thanks
谢谢
回答by Andres Ilich
They are using a @mediaquery for that, which is not included by default in the bootstrap, you can read more about it here in their responsive layoutdocumentation.
他们@media为此使用了一个查询，该查询默认不包含在引导程序中，您可以在他们的响应式布局文档中阅读更多关于它的信息。
Important bit from their CSS:
来自他们 CSS 的重要部分：
@media (min-width: 1200px) {
.span12, .container {
width: 1170px;
}
}
Excerpt from the page
页面摘录
Using the media queries
Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:
- Use the compiled responsive version, bootstrap-responsive.css
- Add @import "responsive.less" and recompile Bootstrap
- Modify and recompile responsive.less as a separate
Why not just include it? Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.
使用媒体查询
Bootstrap 不会自动包含这些媒体查询，但理解和添加它们非常容易，并且需要最少的设置。您有几个选项可以包含 Bootstrap 的响应功能：
- 使用编译后的响应式版本 bootstrap-responsive.css
- 添加@import "responsive.less" 并重新编译 Bootstrap
- 单独修改和重新编译responsive.less
为什么不包括它？说实话，并非所有事情都需要响应。我们认为最好启用它，而不是鼓励开发人员删除此功能。
回答by abbraga
As the documentations says, not everything needs to be responsive. Also, not everything needs to use fullscreen size... some layouts just need more blank space.
正如文档所说，并非所有内容都需要响应。此外，并非所有东西都需要使用全屏尺寸……有些布局只需要更多的空白空间。
I've seen some websites taking off this media query excerpt (@media min-width: 1200px {...}) from the responsive stylesheet, but I couldn't tell if that's correct/recommended or a good workaround.
我已经看到一些网站@media min-width: 1200px {...}从响应式样式表中删除了这个媒体查询摘录 ( )，但我不知道这是正确的/推荐的还是一个好的解决方法。
