Bootstrap怎么设置特定分辨率下的容器最大宽度值样式-Bootstrap教程-PHP中文网

直接写 .container { max-width: 1400px } 不行，因小屏会强制撑宽导致横向滚动，大屏又被 bootstrap 媒体查询覆盖失效；必须通过媒体查询精准覆盖对应断点，或在 sass 中重定义 $container-max-widths 变量并严格对齐键名与断点。

bootstrap怎么设置特定分辨率下的容器最大宽度值样式

直接写 .container { max-width: 1400px } 不行——它会在手机上强制撑宽导致横向滚动，大屏下又被 Bootstrap 原生媒体查询覆盖而失效。必须按断点精准控制。

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

这是引入 bootstrap.min.css 时最稳妥的做法，关键在“断点对齐”和“加载顺序”：

VPS Bootstrap

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

下载

确认你用的 Bootstrap 版本断点值：v5.3+ 是 xl: 1200px、xxl: 1400px；v4.x 只有 xl: 1200px，没有 xxl
自定义 CSS 文件必须放在 Bootstrap CSS 之后加载
只覆盖你需要的断点，例如把 xl 断点（≥1200px）从默认 1140px 改为 1280px：
```
@media (min-width: 1200px) {
  .container {
    max-width: 1280px;
  }
}
```

若还要适配 2K 屏，同步加 xxl 断点：

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

这是最彻底的方式，但极易静默失效——编译不报错，但检查 computed style 就会发现宽度根本没变：

必须在 @import "bootstrap/scss/variables" 之后、@import "bootstrap/scss/container" 之前重赋值
键名必须严格为 xs、sm、md、lg、xl、xxl，少一个或拼错，对应断点就回退默认值

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

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

最容易被忽略的是父元素的 padding 或 overflow: hidden ——它会让容器视觉上“变窄”，但实际 max-width 已生效。查 DevTools 的 Computed 面板，确认哪条规则真正胜出，比猜更可靠。

Bootstrap怎么设置特定分辨率下的容器最大宽度值样式