在Bootstrap 3中将页面宽度设置为最大970px

Question

我正在使用Bootstrap 3构建一个可以在移动设备和桌面上很好地显示的网站。客户告诉我页面的最大宽度只能是970px。

如何使用Bootstrap 3来确保：

1. 页面仍然位于浏览器屏幕的中心位置？

2. Bootstrap 3中所有伟大的东西仍然存在。

Answer 1

你想要它响应吗？试试这个：

@media (min-width: 1200px) {
  .container {
    width: 970px;
   }
}

对于宽度大于1200px的屏幕，这会将容器宽度设置为970px。

Answer 2

Bootstrap实际上在他们的网站上有一个较少的功能。 Here您可以选​​择要使用的引导程序组件。所有引导程序都是响应式的，因此您可以将大小更改为您想要的任何内容，并且一切都将继承。

因此，如果您想将.container定义为max-width：970px，可能会出于您的目的。或者只是更改媒体查询断点。

编辑：只需看一下，您就可以在自定义部分中为每个屏幕尺寸定义网格系统的大小。 @ container-sm，@ container-md，@ container-lg

第二次修改：I forgot about this resource I had bookmarked from a while back. You will probably find it useful

Answer 3

如果您不想要自定义Bootstrap构建，可以将页面内容包装在container-fixed DIV中，并在Bootstrap CSS之后添加此CSS：

.container-fixed {
  margin: 0 auto;
  max-width: 970px;
}

演示：http://bootply.com/96043