twitter-bootstrap 在 Bootstrap 3 中将页面宽度设置为最大 970px
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20151458/
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
Set the page width to max 970px within Bootstrap 3
提问by curious1
I am using Bootstrap 3 to build a website that displays nicely on mobile devices and desktops. The customer tells me that the max width of a page can only be 970px.
我正在使用 Bootstrap 3 构建一个在移动设备和台式机上显示良好的网站。客户告诉我页面的最大宽度只能是 970px。
How can I do this with Bootstrap 3 to make sure that:
如何使用 Bootstrap 3 执行此操作以确保：
The page still centered in a browser screen?
All the great things in Bootstrap 3 are still there.
该页面仍以浏览器屏幕为中心？
Bootstrap 3 中的所有伟大的东西仍然存在。
回答by calofanas
Do you want it responsive? Try this:
你想要它响应吗？试试这个：
@media (min-width: 1200px) {
.container {
width: 970px;
}
}
This will set container width to 970px for screens wider than 1200px.
对于宽度超过 1200 像素的屏幕，这会将容器宽度设置为 970 像素。
回答by echochamber
Bootstrap actually have a less feature on their website. Hereyou can pick and choose what components of bootstrap you want to use. All of bootstrap is made to be responsive so you can change the size to be whatever you want and everything will inherit from that.
Bootstrap 实际上在他们的网站上有一个较少的功能。在这里，您可以选择要使用的引导程序组件。Bootstrap 的所有内容都具有响应性，因此您可以将大小更改为您想要的任何大小，并且所有内容都将从中继承。
So if you want to define .container as max-width: 970px that might serve your purposes. Or maybe just change the media query breakpoints.
因此，如果您想将 .container 定义为 max-width: 970px 可能符合您的目的。或者也许只是更改媒体查询断点。
Edit: Just took a look and you can define the size of your grid system for each screen size in the customize section. @container-sm, @container-md, @container-lg
编辑：只需看一看，您就可以在自定义部分为每个屏幕尺寸定义网格系统的尺寸。@container-sm、@container-md、@container-lg
Second Edit: I forgot about this resource I had bookmarked from a while back. You will probably find it useful
回答by Zim
If you don't want a custom Bootstrap build, you can wrap your page content in a container-fixedDIV and add this CSS after the Bootstrap CSS:
如果您不想要自定义 Bootstrap 构建，您可以将页面内容包装在container-fixedDIV 中，并在 Bootstrap CSS 之后添加此 CSS：
.container-fixed {
margin: 0 auto;
max-width: 970px;
}
Demo: http://bootply.com/96043
