如何将地图移至右侧且不影响文本，实现地图与文本并排显示？

要实现地图移至右侧并与文本并排显示，同时不破坏布局，你可以通过调整Bootstrap列布局类、优化iframe响应式属性来完成，具体修改如下：

修改后的代码 #

<div class="row w-100">
  <!-- 文本区域：左侧占6列 -->
  <div class="col-lg-6 my-4">
    <div>
      <h6>This map is embedded in a 6 column layout</h6>
      <p>Try to resize your browser window - you will see that it starts to take up 12 columns on
        screens smaller than 992px.</p>
      <p>This useful feature helps to make your embedded map responsive (<strong>mobile
          friendly</strong>). You can customize responsive behavior with the use of breakpoints.</p>
      <p>This text looks so nice because it's <strong>vertically centered</strong> you can achieve
        this effect using the vertical alignment layout option.</p>
    </div>
  </div>
  <!-- 地图区域：右侧占6列 -->
  <div class="col-lg-6 my-4">
    <iframe src="#" 
            width="100%" height="450" style="border:0; max-width: 100%;" 
            allowfullscreen="true" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
  </div>
</div>

关键调整说明 #

• 调换列顺序：把文本容器放在地图容器前面，大屏幕下文本居左、地图居右；小屏幕（小于992px）下自动堆叠，保留移动端适配性。
• 删除多余偏移类：移除原代码中的offset-lg-1，避免列宽度总和超过12列导致换行。两个col-lg-6刚好填满12列，实现完美并排。
• 优化iframe适配性：将iframe的width改为100%，并添加max-width:100%样式，确保地图在不同屏幕尺寸下自动适配容器宽度，不会溢出。

如果需要给两侧添加间距，可以将列类改为col-lg-5，并给地图区域添加offset-lg-2，示例代码如下：

<div class="col-lg-5 my-4">...</div>
<div class="col-lg-5 my-4 offset-lg-2">...</div>

这样总列数5+2+5=12，文本和地图各占5列，中间留2列间距，布局更宽松美观。

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