twitter-bootstrap 如何在Bootstrap中选择960px宽而不是1200px的容器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13979654/
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 choose the container 960px wide and not to 1200px in Bootstrap
提问by Marco Gurnari
How to choose the container 960pxwide and not to 1200px in Bootstrap?
如何在 Bootstrap 中选择960px宽而不是 1200px的容器？
采纳答案by hajpoj
Do you just want a fixed width website? If so then then just don't include bootstrap-responsive.css. The default width for a fixed width container will be 960px.
你只想要一个固定宽度的网站吗？如果是这样，那么就不要包含bootstrap-responsive.css. 固定宽度容器的默认宽度为 960 像素。
Otherwise if you still want the responsive features but no 1200px container you will need to customize your bootstrap install. To do that:
否则，如果您仍然需要响应式功能但没有 1200px 容器，则需要自定义引导程序安装。要做到这一点：
- Go to http://twitter.github.com/bootstrap/customize.html
- Under the responsive section uncheck "Large desktops (>1200px)"
- At the bottom of the page Click "customize and download" to get your custom bootstrap
- 转到http://twitter.github.com/bootstrap/customize.html
- 在响应部分下取消选中“大型桌面（> 1200px）”
- 在页面底部单击“自定义并下载”以获取您的自定义引导程序
回答by calofanas
Bootstrap sets container width to 1170px on screens wider than 1200px.
For screens from 992px to 1200px width of container is set to 970px.
You can read more about bootstrap's grid here
Now if you want to set container to 760px for large screens, you have to locate this and edit in bootstrap.css or add this code to your custom css:
Bootstrap 在宽度超过 1200 像素的屏幕上将容器宽度设置为 1170 像素。
对于 992px 到 1200px 的屏幕，容器的宽度设置为 970px。您可以在此处阅读有关 bootstrap 网格的更多信息
现在，如果您想将大屏幕的容器设置为 760px，您必须找到它并在 bootstrap.css 中进行编辑或将此代码添加到您的自定义 css 中：
@media (min-width: 1200px) {
.container {
width: 960px;
}
}
and
和
@media (min-width: 992px) {
.container {
width: 960px;
}
}
Hope this helps
希望这可以帮助
回答by Surinder ツ
This works for me.
这对我有用。
!important is not recommended to use. but you can try.
!important 不推荐使用。但你可以试试。
.container, .container-fluid{
width: 960px !important;
}
回答by Henry Neo
For Bootstrap3, you can customize it to get 960px by default (http://getbootstrap.com/customize/)
对于 Bootstrap3，你可以自定义它默认为 960px ( http://getbootstrap.com/customize/)
- change @container-lg from ((1140px + @grid-gutter-width)) to ((940px + @grid-gutter-width)).
- change @grid-gutter-width from 30px to 20px.
- 将@container-lg 从 ((1140px + @grid-gutter-width)) 更改为 ((940px + @grid-gutter-width))。
- 将@grid-gutter-width 从 30px 更改为 20px。
then download your custom version of bootstrap and use it. It should be 960px by default now.
然后下载自定义版本的引导程序并使用它。现在默认应该是 960px。
回答by Yura Loginov
If you are using sass and bootstrap v3.3.1, just define these variable beforeimporting bootstrap:
如果您使用 sass 和 bootstrap v3.3.1，只需在导入 bootstrap之前定义这些变量：
$grid-gutter-width: 20px;
$container-large-desktop: 940px + $grid-gutter-width;
For more info please check the variables source file: https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss
更多信息请查看变量源文件：https: //github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss
