怎样设置Bootstrap页面的最大内容宽度-css教程-PHP中文网

直接写 .container { max-width: 1400px } 不行，因为 bootstrap 的 .container 宽度由多级媒体查询控制，无断点规则会在小屏下强制撑宽引发横向滚动，大屏下又被原生规则覆盖；加 !important 则破坏全部响应式逻辑。

怎样设置bootstrap页面的最大内容宽度

因为 Bootstrap 的 .container 宽度不是单条 CSS 控制的，而是靠一组 @media (min-width: ...) 规则阶梯生效。你写的无断点规则：

这是最常用、最安全的做法，前提是你的自定义 CSS 文件加载顺序在 Bootstrap CSS 之后。

VPS Bootstrap

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

下载

先确认你用的 Bootstrap 版本断点值：v5.3+ 是 xl: 1200px、xxl: 1400px；v4 是 xl: 1200px，没有 xxl
只覆盖你需要的断点，例如把 xxl 断点从默认 1140px 改为 1440px：
```
@media (min-width: 1400px) {<br>  .container { max-width: 1440px; }<br>}
```
别写 div.container 这类降权选择器，保持 .container 简洁即可
不要加 !important——只要断点值对、顺序对，就能干净覆盖

这是最彻底的方式，但只适用于你自己编译 Bootstrap（如 Webpack + sass-loader）。

必须在 @import "bootstrap/scss/variables" 之后、@import "bootstrap/scss/container" 之前重赋值
键名 (sm, md, lg, xl, xxl) 一个都不能拼错，缺一个就会回退默认值

推荐用 map-merge 只改局部，避免漏掉其他断点：

$container-max-widths: map-merge($container-max-widths, (<br>  xl: 1280px,<br>  xxl: 1440px<br>));

如果新增了断点（比如自定义 xxxl），必须同步更新 $grid-breakpoints 和 $container-max-widths，否则不生效

这不是“改宽度”，而是换思路——适合那些实际需求是“视觉上更宽松”，而非硬要修改 .container 行为的场景。

加 mx-auto 和 max-width 控制内容区：

<div class="container-fluid">
<br><div class="mx-auto" style="max-width: 1400px;">...</div>
<br>
</div>

真正容易被忽略的是断点值与版本的严格匹配——写 @media (min-width: 1400px) 却用着 v4 的 Bootstrap，或者 Sass 中漏掉 xxl 键名，都不会报错，但宽度就是不变。

怎样设置Bootstrap页面的最大内容宽度