使用Bootstrap添加m-0类后元素右侧仍有边距的问题排查

问题根源 #

你遇到的右侧边距问题，核心是Bootstrap .container 类的默认样式限制：

• .container 类自带断点对应的 max-width 属性（例如大屏幕下默认最大宽度为1320px），即便添加了 w-100（width:100%），这个 max-width 会强制容器在屏幕宽度超过断点阈值时停止拉伸，导致容器无法占满视口，视觉上出现右侧（及左侧）空白。
• 此外，.container 默认带有左右内边距（padding-right/padding-left），但你提到设置 max-width:100% 能临时解决，说明主要问题来自 max-width 限制。

解决方案 #

方案1：改用.container-fluid（推荐）

Bootstrap提供的.container-fluid类专为全屏宽度设计，它的max-width默认为100%，不受断点限制。只需替换原有的.container类：

<div class="container-fluid h-100 w-100 bg-light m-0 p-0">

• 额外添加p-0可以去掉.container-fluid默认的左右内边距，若需要保留内边距可省略该类。

方案2：覆盖.container的max-width

如果坚持使用.container，可以通过添加Bootstrap内置的mw-100类（max-width:100%）覆盖默认的断点max-width：

<div class="container h-100 w-100 bg-light m-0 mw-100">

额外优化：响应式iframe

你的iframe使用了固定宽度450px，在小屏幕下可能会溢出容器。建议改为响应式设置：

<iframe src="" class="w-100" style="max-width:450px; height:450px; border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

这样iframe会在小屏幕上自适应容器宽度，大屏幕下保持最大450px宽度。

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