使用 Bootstrap 设置 body 的最大宽度

Question

我正在使用 Twitter Bootstrap 构建我的第一个网站并尝试使用流畅的布局。我已经将我的容器设置为流动的，现在里面的内容占据了整个页面宽度并随着我调整浏览器的大小而调整。

我正在处理的设计是为 ~950px 的最大宽度而创建的。

我检查了 variables.less 和 responsive.less 以及 Bootstrap 文档；我不太清楚如何做到这一点。

我还尝试将以下内容添加到我的 style.css ：

 body {
    max-width: 950px;
}

原文由 Olly F 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

编辑

一个更好的方法是：

1. 创建您自己的 .less 文件作为主 .less 文件（如 bootstrap.less ）。

2. 导入您需要的所有 bootstrap .less 文件。 （在这种情况下，您只需要导入所有响应式 .less 文件，但 responsive-1200px-min.less ）

3. 如果您需要修改原始 bootstrap .less 文件中的任何内容，您只需编写自己的 .less 来覆盖 bootstrap 的 .less 代码。 （请记住将您的 .less 代码/文件放在 @import { /* bootstrap's .less file */ }; 之后）。

原来的

我也有同样的问题。这就是我修复它的方式。

查找媒体查询：

 @media (max-width:1200px) ...

去掉它。 （我的意思是整个事情，而不仅仅是 @media (max-width:1200px) ）

因为 Bootstrap 的默认宽度是 940px，所以你不需要做任何事情。

如果你想拥有自己的 max-width ，只需修改媒体查询中的 css 规则以匹配你想要的宽度。

原文由 maxisam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您不必通过删除 @media (max-width:1200px) 来修改 bootstrap-responsive

我的应用程序有一个 max-width 。这是它对我有用的方法：

1. 创建 bootstrap-custom.css - 我尽可能不想覆盖我原来的 bootstrap css。

2. 在 bootstrap-custom.css 中，通过包含以下代码来覆盖 container-fluid：

像这样：

 /* set a max-width for horizontal fluid layout and make it centered */
.container-fluid {
  margin-right: auto;
  margin-left: auto;
  max-width: 1600px; /* or 950px */
}

原文由 jcg 发布，翻译遵循 CC BY-SA 3.0 许可协议