bootstrap容器右侧留白的根源是.max-width响应式断点限制而非外边距，正确解法是用p-0/px-*控制内边距或改用.container-fluid，切勿直接修改margin破坏居中机制。
直接改 .container 的 margin 会破坏居中
很多人发现 Bootstrap 容器左右空太多，第一反应是加 style="margin-left: 0" 或覆盖 margin-right。这会导致容器立刻偏左、失去水平居中——因为 .container 依赖 margin-left: auto; margin-right: auto 实现居中，任何显式设置都会覆盖它。
真正该做的是：用内边距控制内部留白，或换更细粒度的工具类。比如想让内容离容器边缘近一点，给内部的 <div class="row"> 加 <code>p-0 或 px-3，而不是动 .container 自身。
mt-5、mb-2 这类间距类怎么选大小
Bootstrap 的间距类（如 mt-3、ps-4）基于预设的 $spacer 变量（默认 1rem），数字代表倍数：mt-1 ≈ 0.25rem，mt-3 ≈ 1rem，mt-5 ≈ 3rem。过大的值（如 mt-5）在小屏上容易撑开空白，尤其在移动端。
- 优先用
mt-2～mt-4控制段落/卡片间距离 - 响应式前缀能缓解问题，例如
mb-md-0 mb-lg-3：小屏无下边距，大屏恢复 - 避免全局滥用
!important覆盖，它会干扰后续工具类叠加
为什么不用自定义 CSS 写 margin？
写 .my-card { margin-bottom: 16px } 看似简单，但会带来三个实际麻烦：
- 无法响应式：要支持断点就得写三套规则（
@media (min-width: 768px)…） - 维护成本高：每加一个新组件都要重复定义，而
mb-3是即插即用 - 和工具类混用易冲突：比如同时加
mb-3和自定义margin-bottom，后者可能被覆盖或叠加出意外高度
真有特殊尺寸需求，建议在 Sass 中调整 $spacers 映射变量，而不是零散写样式。
间距类的隐藏代价：HTML 变臃肿、语义弱
大量使用 pt-2 pe-4 pb-0 ps-3 会让 HTML 标签里塞满类名，可读性下降，也削弱了语义表达——class="card-header p-3" 不如 class="card-header header-spacing" 直观（虽然后者需额外定义）。
这不是不能用，而是要注意边界：
- 布局结构层（如容器、行、列）优先用工具类
- 业务组件内部（如按钮、表单项）建议封装成带默认间距的自定义类
- 团队协作时，统一约定哪些场景必须用工具类、哪些禁止用
最常被忽略的一点：间距类不解决 margin 塌陷。两个相邻 mt-4 元素不会叠加出 8rem，而是取最大值——这和直觉不符，调试时得心里有数。
