Bootstrap 5 container容器实测尺寸与官方文档标注不匹配

你观察到的尺寸偏差是框架正常表现，不是bug，偏差来自两个可复现的确定原因：

• 容器添加的border类影响了宽度读取结果
  Bootstrap 全局默认所有元素使用box-sizing: border-box盒模型，即元素设置的width/max-width属性值包含内边距（padding）和边框（border）。官方文档标注的各断点容器宽度，是容器max-width属性的设定值。
  你的测试代码给所有容器都加了.border类，这个类会给容器加上左右各1px的实线边框，此时容器内容区+左右内边距的总宽度（也就是JS里clientWidth属性的返回值）会比max-width设定值小2px，这就是你看到的几px固定偏差的来源。去掉容器上的border类，这部分偏差会直接消失。

• JS读取的窗口宽度和CSS媒体查询的判断基准不一致
  你用window.innerWidth获取的窗口宽度，包含浏览器垂直滚动条的宽度（Windows系统Chrome/Edge默认滚动条宽度为15~17px，macOS开启滚动条自动隐藏时宽度为0）。
  但Bootstrap的响应式断点是通过CSS媒体查询实现的，CSS媒体查询判断视口宽度时不会把垂直滚动条算入宽度。这就会导致JS读到的窗口宽度比CSS实际触发断点的宽度大15px左右，你会观察到「窗口宽度还没到官方标称的断点值，容器就已经切换宽度档位」的现象，这部分偏差和你的测试代码无关，是浏览器本身的API差异导致的。

快速验证方法 #

你可以通过两个小测试确认上述结论：

1. 删除所有容器标签上的border类，重新测量容器宽度，会发现2px左右的固定偏差直接消失，容器宽度和官方标称值完全匹配
2. 给页面根元素加样式html { overflow-y: hidden; }临时禁用垂直滚动条，此时window.innerWidth和CSS媒体查询的视口判断基准完全一致，断点触发位置的宽度差也会同步消失

这类小幅偏差完全不影响实际业务开发，Bootstrap的栅格和容器逻辑本身预留了足够的容错空间，不需要做额外修正。

内容的提问来源于stack exchange，提问作者Iroqas