
bootstrap 的 `container` 类会自动添加左右内边距(padding),导致页面内容两侧出现白边;只需移除该类或改用 `container-fluid` 即可消除默认 padding。
Bootstrap 为响应式布局设计了标准容器类,其中 .container 是最常用的一个——但它会在中等及以上屏幕尺寸下添加固定的左右内边距(如 padding-left: 15px; padding-right: 15px;),这是你看到“白色空隙”的根本原因。即使你的动画标题(如
✅ 正确做法是:移除 container 类,改用语义更清晰、无默认 padding 的结构。例如:
Internet Of Things
Internet Of Things
⚠️ 注意事项:
- 若仍需 Bootstrap 的栅格系统(如 row / col-*),可将 .row 直接置于无 padding 的父容器内——因为 .row 本身已通过负 margin 抵消了 .container 的 padding;
- 替代方案:使用 .container-fluid 类,它在所有断点下均铺满视口宽度(width: 100%),且不设水平 padding;
- 切勿通过暴力重置(如 padding: 0 !important)覆盖 Bootstrap 样式,这会破坏响应式一致性,也违背 CSS 工程最佳实践。
总结:Bootstrap 的 padding 来源明确(主要是 .container),解决方式应优先从 HTML 结构入手——精简语义化容器,而非在 CSS 中打补丁。










