bootstrap 的 `container` 类会自动添加左右内边距（padding），导致内容两侧出现白边；只需移除该类或改用 `container-fluid` 即可消除默认间距。

在使用 Bootstrap 构建响应式页面时，开发者常将布局包裹在

中以实现居中与最大宽度控制。但该类默认应用了 padding-right: 15px; padding-left: 15px;（在标准断点下），这正是你截图中左右“白边”（即非预期的空白区域）的根源——尤其在全宽动画头图（如 Canvas 背景 + 全屏标题）场景下，这种 padding 会破坏视觉完整性。

✅ 正确解决方案：
直接移除 container 类，改用语义更清晰、无内置 padding 的结构容器。例如：

  
    
    
Internet Of Things
  




  
    
      
      
Internet Of Things
    
  

⚠️ 补充说明：

• 若仍需 Bootstrap 的响应式栅格系统（如 row/col），可改用 container-fluid —— 它提供 100% 宽度且无水平 padding，适合全宽组件；
• 切勿通过 !important 强制覆盖 .container { padding: 0 !important; }，这会破坏框架一致性，且在不同断点下可能引发意外布局错位；
• 检查是否误将 container 应用于 或根级 wrapper，此类嵌套易被忽略，却是 padding 泄露的常见源头。

总结：Bootstrap 的 container 是功能型工具，不是必须项。理解其设计意图（居中+留白）后，按需选用 container-fluid 或自定义容器，才能精准控制视觉边界，让动画头图真正“撑满视口”。