如何在WordPress Raw HTML组件中实现Google Maps iframe全屏显示

以下是针对你遇到的左右空隙问题的分步解决方案：

1. 调整WPBakery Row组件的全局设置 #

• 打开页面编辑器，找到地图所在的最外层Row组件，点击编辑按钮进入设置面板。
• 在「Row Layout」选项中，勾选「Stretch Row and Content (no paddings)」，让Row直接拉伸至浏览器边缘。
• 同时将Row的「Padding」和「Margin」左右值都设为0，清除默认内边距。

2. 优化Raw HTML组件的样式 #

• 选中嵌入地图的Raw HTML组件，进入「Design Options」面板。
• 将组件的「Margin」和「Padding」全部设为0，避免组件自身产生空隙。
• 如果组件有自定义CSS类，直接添加样式：width: 100%; margin: 0; padding: 0;

3. 修改Google Maps iframe代码 #

确保iframe的属性和内联样式完全适配全屏：

<iframe 
  src="你的Google Maps嵌入URL" 
  width="100%" 
  height="600" 
  frameborder="0" 
  style="border:0; width: 100%; height: 600px; margin: 0; padding: 0;" 
  allowfullscreen>
</iframe>

• 用width="100%"替代固定宽度值，确保地图随容器自适应。
• height可根据需求设置为固定值（如600px）或视窗高度（100vh）。

4. 强制覆盖主题/WPBakery的全局样式（若以上步骤无效） #

进入WordPress后台「外观」→「自定义」→「额外CSS」，添加以下代码：

/* 移除地图所在Row的默认边距 */
.vc_row.wpb_row.vc_row-fluid {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 确保Raw HTML容器无额外间距 */
.wpb_raw_code.wpb_content_element {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* 强制iframe占满容器 */
.wpb_raw_code iframe {
    width: 100% !important;
    min-width: 100% !important;
    margin: 0 !important;
}

• 如果你的页面有自定义Row类，替换.vc_row为你的类名，避免影响其他页面布局。

5. 检查主题的容器限制 #

部分主题会给页面内容添加固定宽度的.container容器，若地图仍被限制：

/* 仅针对联系页面解除容器宽度限制 */
.page-id-你的页面ID .site-content .container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

• 页面ID可在编辑页面的URL中找到（如post=123，ID即为123）。

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