bootstrap 5 的 .container 在 2k 屏下默认不撑满是设计使然，因按断点取 max-width: 1320px（xxl ≥1400px），左右留白约 620px；.container-fluid 才真正撑满父容器，但默认含 12px 内边距。
Bootstrap 5 的 .container 在 2K 屏幕（2560×1440）下默认不会撑满，它仍按断点规则取 max-width: 1320px（对应 xxl 断点 ≥1400px），左右留白约 120px —— 这不是 bug，是设计使然。
为什么 .container 在 2K 屏上不占满全宽
Bootstrap 5 的 .container 是响应式定宽容器，不是 viewport 百分比宽度。它查的是屏幕最小宽度是否 ≥ 某个断点，然后套用预设的 max-width 值：
-
.container-xxl对应 ≥1400px，max-width: 1320px（即 2K 屏实际生效的值） - 即使屏幕宽 2560px，它也不会自动拉到 2560px，更不会变成
100vw - 左右留白 =
(2560px − 1320px) / 2 ≈ 620px，视觉上就是“内容缩在中间”
.container-fluid 在 2K 屏下的真实表现
.container-fluid 才是真正「撑满父容器」的类，但它在 2K 屏下仍可能不贴边，原因常被忽略：
- Bootstrap 5 默认给
.container-fluid加了padding-left: 0.75rem和padding-right: 0.75rem（即 12px），所以左右各空 12px - 若父元素（如
）有自定义margin或padding，会进一步放大留白 - 滚动条宽度（macOS 隐藏式 vs Windows 常驻式）会影响最终计算出的
100%宽度
验证方法：打开 DevTools，选中该元素，看「Computed」面板里的 width 和 padding 实际值，别只信 class 名。
如何让内容在 2K 屏既居中又接近全宽
直接改 .container 类行为不现实，推荐组合策略：
- 用
.container-xxl（而非默认.container），确保 ≥1400px 时取最大 1320px 宽度 - 加自定义类清除内边距：
<div class="container-xxl px-0"> <li>若需更宽（比如 1600px），不要魔改断点，而是额外加 CSS：<code>.container-xxl.wide { max-width: 1600px; } - 避免混用：
<div class="container-fluid"><div class="container"> 在 2K 屏下极易因 padding/margin 叠加导致错位 <h3>容易被忽略的兼容性细节</h3> <p>2K 屏用户常开缩放（125%、150%），这会直接影响 Bootstrap 断点触发逻辑：</p> <ul> <li>浏览器按「设备像素比 × 缩放比例」计算视口宽度，可能导致本该触发 <code>xxl的屏幕回退到xl（1140px） - RTL 模式下，
.container-fluid的 padding 方向会翻转，但若你没启用 RTL，这个规则仍存在于 CSS 中，只是不生效 - 打印样式表里，
.container-fluid不会自动适配 A4 宽度，需显式加@media print { .container-fluid { width: 100%; } }
真正要适配高分屏，不能只盯容器类 —— 栅格列宽、字体大小、间距工具类（如 px-5）都会受缩放影响，得整体测试。
