更改 Bootstrap 默认容器宽度

Posted 2023-03-06

【中文标题】更改 Bootstrap 默认容器宽度

【英文标题】：Changing Bootstrap default container width

【发布时间】：2014-08-27 05:27:38

【问题描述】：

我想更改引导容器的默认宽度，即1170px。 可以覆盖这样的设置吗？

@media (min-width: 1200px) 
    .container 
        width: desired_width;
    

这就是我真正要做的一切吗？

【问题讨论】：

我们必须查看更多代码以确保能够真正解决问题，但是是的，在 Bootstrap 中覆盖 CSS 规则绝对没问题。

请不要覆盖已编译的 bootstrap.min.css...这是一个非常糟糕的做法！请参阅我的答案。

【参考方案1】：

直接编辑已编译的（也许是缩小的）CSS 文件并不好。这被认为是一种不好的做法，应该避免。

如果你想改变默认宽度，你必须重新编译你的 Bootstrap。这取决于您当前使用 Bootstrap 的方式；如果您使用的是 CSS 预处理器，例如 SASS 或 LESS，您可以只编辑变量（参见 variables.less）。否则，您可以转到 http://getbootstrap.com/customize/ 以获得自定义构建。

如果你没有使用任何预处理器，你可以摆弄grid system 和media queries breakpoints。

回答您的问题，您可能只想使用custom build 更改@container-large-desktop 和@screen-lg（假设您没有使用预处理器）。

【讨论】：

好的，如果我使用自定义，实际会发生什么变化？

通过自定义 Bootstrap，您实际上可以根据需要更改任何内容。例如。对于一个项目，我必须将默认网格更改为 960 像素，但为了做到这一点，我还必须减少网格间距。

@simone 请在您的答案中定义“覆盖”，因为 CSS 规则可以在单独的 CSS 文件中被覆盖，这种方法是完全可以接受的。我知道你想阻止修改原始的 Bootstrap CSS 文件，但你可能想让它更清楚一点。

@koala_dev 我编辑了我的答案，你说得对，我不清楚。希望现在已经足够清楚了