Bootstrap 5 容器宽度 px 数值修改 SCSS 变量-Bootstrap教程-PHP中文网

真正生效需重定义Sass变量$container-max-widths并在引入Bootstrap前覆盖，同时同步更新$grid-breakpoints；CDN用户只能用!important配合媒体查询覆盖，但会导致响应行为脱节。

bootstrap 5 容器宽度 px 数值修改 scss 变量

直接改 `$container-max-widths` 才算真正生效

只在 CSS 里写 .container { max-width: 1200px !important; } 看似简单，但会破坏响应式阶梯逻辑——.container-lg 可能比 .container-xl 还宽，col-lg-6 在 992px 下不按预期布局。真正可控的方式是重定义 Sass 变量 $container-max-widths，它才是所有容器宽度的唯一源头。

必须在引入 Bootstrap 核心样式前覆盖该变量，顺序不能错：

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
在这里重定义 $container-max-widths
@import "bootstrap/scss/container";（以及后续其他模块）

示例（把 xl 断点从默认 1140px 改为 1200px）：

$container-max-widths: (
  xs: 100%,
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1200px,
  xxl: 1320px
);

`$grid-breakpoints` 必须同步更新，否则断点失效

改了 $container-max-widths 却不碰 $grid-breakpoints，会出现“类名存在但不起作用”的情况。比如你把 lg 宽度调大了，但 $grid-breakpoints 里 lg: 992px 没变，那 .container-lg 依然只在 ≥992px 时启用，而它的宽度却可能被其他断点值覆盖，导致视觉错乱。

两个变量必须键名一致、数值协同：

都保留 xs、sm、md、lg、xl、xxl 六个键
每个键的值单位统一用 px（如 lg: 1024px），不能漏单位或写成字符串
如果新增断点（如 xxxl），需同时加进两个变量，且确保所有依赖函数（如 make-container-max-widths()）能识别

CDN 用户只能用 `!important` 覆盖，但有硬伤

用 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/css/bootstrap.min.css"> 的项目，无法修改 Sass 变量，只能走 CSS 覆盖路线。这时要加 !important，且必须写全断点媒体查询：

VPS Bootstrap

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

下载

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

问题在于：所有工具类（.d-lg-block、.col-xl-4）和 JS 组件（Offcanvas 的 breakpoint 判断）仍按原始断点运行，你看到的“宽度变了”，但其他响应行为可能完全脱节。

更稳妥的替代方案：

换用 .container-fluid + 工具类控制留白（如 px-5 或 mx-auto 配合 max-width: 1200px）
对关键区域单独加 wrapper 元素并设 max-width，不依赖 .container 类

`--bs-gutter-x` 和容器宽度无关，别混淆

有人看到 --bs-gutter-x 就以为调它能“放大容器”，其实它只影响 .row 内部列之间的水平间距（gutter），和 .container 的 max-width 完全无关。设置 :root { --bs-gutter-x: 2rem; } 后，.col-6 之间空隙变大，但容器左右边界没动，内容区总宽度也不变。

常见误操作：

在 .container 上写 style="--bs-gutter-x: 2rem" → 无效，该属性只对 .row 生效
用 px-0 清除容器内边距后，误以为 gutter 是唯一留白来源 → 实际上 .container 本身无 padding，左右留白来自 margin: 0 auto 居中后的空白

真想让内容区域“看起来更宽”，优先考虑 .container-fluid，再配合间距工具类微调，比硬啃变量更轻量、更可控。