Bootstrap4布局下Google Map iframe无法占满col-12列全宽问题求助

问题原因 #

• 核心是网格结构嵌套不符合Bootstrap 4的规范：你把存放地图的row直接放在了第二行（营业时间+介绍文本所在的row）的内部，和col-md-4、col-md-8同级，没有包裹在列容器内，导致该row继承了上层错误的宽度限制，内部的col-12自然没法铺满全宽。
• iframe设置height:100%无效是因为父元素col-12没有定义固定高度，百分比高度找不到参照值。
• 第二行的col-md-8内部额外嵌套了多余的container，自带的内边距和最大宽度限制也会挤压整体布局。

修复步骤 #

1. 调整网格结构，把地图所在的row从第二行的row内部移出，变成和第一行标题、第二行信息同级的独立行，遵循container -> row -> col的嵌套逻辑。
2. 给iframe设置固定最小高度，或者直接用Bootstrap 4自带的响应式嵌入类embed-responsive实现自适应宽高，不用手动写宽高样式。
3. 删除col-md-8内部多余的container嵌套。

修正后的核心代码片段 #

<div class="container containerColor">
  <!-- 第一行：标题 -->
  <div class="row">
    <div class="col-12 text-center sectionContent bannerBody">
      <h1>contact</h1>
    </div>
  </div>

  <!-- 第二行：营业时间+介绍文本 -->
  <div class="row d-flex justify-content-center sectionContent bannerBody">
    <div class="col-xs-12 col-sm-12 col-md-4 sectionContent bannerBody">
      <div class="card cards">
        <h3 class="card-header cards-header">Hours of Operation</h3>
        <div class="card-body">
          <dl class="row d-flex justify-content-center">
            <dt class="col-6">Sunday</dt>
            <dd class="col-6">10am - 5pm</dd>
            <dt class="col-6">Monday</dt>
            <dd class="col-6">---</dd>
            <dt class="col-6">Tuesday</dt>
            <dd class="col-6">---</dd>
            <dt class="col-6">Wednesday</dt>
            <dd class="col-6">10am - 5pm</dd>
            <dt class="col-6">Thursday</dt>
            <dd class="col-6">10am - 6pm</dd>
            <dt class="col-6">Friday</dt>
            <dd class="col-6">---</dd>
            <dt class="col-6">Saturday</dt>
            <dd class="col-6">9am - 3pm</dd>
          </dl>
        </div>
      </div>
    </div>
    <div class="col-8 col-xs-12 col-sm-12 col-md-8">
      <!-- 删掉了多余的container嵌套 -->
      <div style="overflow-wrap: break-word">
        <h1>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem eum adipisci quos animi earum repudiandae ipsum ut dignissimos vel suscipit dolor dolores vitae sapiente repellendus asperiores, tempora ea minus quisquam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio distinctio error magni eaque quidem quaerat deleniti aut beatae. Mollitia maxime voluptatum, in magnam sed fuga autem nihil nulla perferendis saepe.
        </h1>
      </div>
    </div>
  </div>
  <!-- 地图行移到第二行的闭合标签外面，变成独立行 -->
  <div class="row d-flex justify-content-center mt-5 mb-5">
    <div class="col-12">
      <!-- 用Bootstrap响应式嵌入类，比例选16:9，也可以替换为embed-responsive-4by3调整比例 -->
      <div class="embed-responsive embed-responsive-16by9">
        <iframe
          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3220.99444862719!2d-115.2891474483767!3d36.16668971070266!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c8bf86523a6539%3A0xe2cd727e83aa610d!2s430%20S%20Rampart%20Blvd%20%23150%2C%20Las%20Vegas%2C%20NV%2089145!5e0!3m2!1sen!2sus!4v1634184552181!5m2!1sen!2sus"
          style="border: 2px solid;"
          class="embed-responsive-item"
          allowfullscreen=""
          loading="lazy"
        ></iframe>
      </div>
    </div>
  </div>

  <!-- 最后一行：邮箱 -->
  <div class="row sectionContent">
    <div class="col-12 text-center">
      <h1 class="bannerBody">rachel<wbr />@jackofallfades.co</h1>
    </div>
  </div>
</div>

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