如何自定义Bootstrap容器的最大宽度_修改.container的max-width各级CSS-css教程-PHP中文网

直接写 .container { max-width: 1400px } 无效，因 bootstrap 的容器宽度由媒体查询控制，该规则无断点、优先级低且在小屏下强制宽导致溢出；正确做法是用对应断点的 @media 覆盖或 sass 变量重定义。

如何自定义bootstrap容器的最大宽度_修改.container的max-width各级css

直接写 `.container { max-width: 1400px }` 为什么无效

因为 Bootstrap 的 .container 宽度由一组媒体查询控制，不是单条 CSS 规则。你写的这条样式没有媒体查询，优先级低于 Bootstrap 自带的 @media (min-width: 1200px) { .container { max-width: 1140px; } }，浏览器直接忽略它。更糟的是，它会在所有屏幕尺寸下生效——小屏也强制 1400px，导致内容横向溢出、页面可左右滑动。

纯 CSS 覆盖必须用对应断点的 `@media`

适用于 CDN 引入 bootstrap.min.css、没走 Sass 编译的项目。关键有三点：

把自定义 CSS 放在 Bootstrap CSS 文件之后加载
选择器保持简洁，别写成 div.container（会降权）
只覆盖你要改的断点，例如扩大大屏宽度：

@media (min-width: 1200px) {
  .container {
    max-width: 1400px;
  }
}
@media (min-width: 1400px) {
  .container {
    max-width: 1600px;
  }
}

不要加 !important——只要加载顺序对、选择器没降权，就能干净覆盖。

Sass 方案：重定义 `$container-max-widths` 变量

这是最彻底、可维护性最高的方式，但只适用于你自己编译 Bootstrap（如 Webpack + sass-loader）。必须严格满足两个条件：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

在 @import "bootstrap/scss/variables" 之后、@import "bootstrap/scss/container" 之前重赋值
变量必须包含全部断点键名，缺一个就会回退到 Bootstrap 默认值

推荐只改某一项，避免误伤其他断点：

$container-max-widths: map-merge($container-max-widths, (xl: 1400px));

如果要新增 xxl 以上断点（比如适配 2K 屏），还需同步更新 $grid-breakpoints，否则新断点不触发。

别用 `style="max-width: ..."` 或 `.container-fluid` 混搭

内联样式优先级仍敌不过媒体查询，且破坏响应逻辑；.container-fluid 是全宽（width: 100%），没有 max-width，不能“加大一点”，只能“全宽”。真要局部突破，用组合：

<div class="container-fluid px-0"><div class="container">...</div></div> —— 外层撑满，内层保断点
避免给 .container 加 width、margin 或 !important，这些会干扰栅格系统计算

最容易被忽略的点：Sass 变量覆盖失败时，编译不报错，页面看起来“好像正常”，但检查 computed styles 会发现 max-width 还是默认值——务必用浏览器开发者工具验证最终渲染结果。