如何让Bootstrap的container在移动端美观且桌面端不会出现适配问题？

代码作用解释 #

这段代码是基于CSS响应式规则，为Bootstrap生态自定义了两种特殊的容器宽度规格，解决原生Bootstrap container在大屏下的宽度不符合业务需求的问题：

• 当用户设备的屏幕宽度≥1200px时（也就是Bootstrap默认的超大屏断点），会生效两个自定义类的宽度规则
  • .container-small类绑定的元素宽度会固定为700px，比Bootstrap原生大屏下container的默认宽度窄很多，适合做窄屏内容排版（比如文章阅读页、单字段表单页）
  • .container-large类绑定的元素宽度会固定为1500px，比Bootstrap原生大屏下container的宽度宽，适合做大屏信息流、数据看板类的宽屏布局
• 屏幕宽度小于1200px的时候，这两个自定义类不会被这段代码施加额外样式，会自动继承Bootstrap原生container的响应式宽度规则，实现小屏到中屏的适配统一。

运行原理解析 #

1. 媒体查询触发逻辑 #

代码最外层的@media (min-width: 1200px)是CSS3的媒体查询规则，作用是只有满足「当前设备视口宽度最小为1200px」的条件时，大括号包裹的内部样式才会被浏览器加载生效，不满足条件时自动忽略内部样式。

1200px这个断点刚好对应Bootstrap v4/v5版本默认的超大屏（xl/xxl）分界值，和Bootstrap原生响应式体系是对齐的。

2. 自定义容器类的优先级逻辑 #

Bootstrap原生的.container类本身已经带了各断点的宽度规则，你只需要给原有container元素额外追加.container-small或者.container-large类即可：因为CSS规则后加载优先级更高，只要媒体查询触发，自定义的宽度规则会覆盖原生container的宽度值，不需要修改Bootstrap源码。

3. 为什么能实现「显示效果统一」 #

原来的Bootstrap原生container在≥1200px的区间，会随着屏幕宽度继续变大再跳一次宽度（比如v5的xxl断点1400px时会变成1320px），这段代码把大屏下的容器宽度直接固定成了你需要的700px/1500px，不管用户是1200px的笔记本还是27寸4K显示器，这两类容器的宽度都不会再变，排版不会因为屏幕超大就变得稀碎，自然就实现了大屏下的显示效果统一。

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