Bootstrap布局疑问：12列布局中6列元素为何堆叠？

你的核心问题是地图容器被错误嵌套在工作时间容器内部，导致二者无法在同一行并排显示。此外，内部列的宽度设置也不符合预期布局需求。以下是具体修复步骤和代码：

原代码问题点 #

1. 地图的col-md-6被包裹在工作时间的col-md-6中，属于子元素，自然会堆叠在下方
2. 工作时间内的日期和时段列使用col-md-3，仅占父容器的25%宽度，浪费空间
3. 地图iframe设置固定宽度600px，在小屏幕会导致溢出

修复后的代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<section class="maps-link">
  <div class="container-fluid">
    <div class="row align-items-center justify-content-center">
      <!-- 工作时间区域：占6列 -->
      <div class="col-md-6">
        <h5 class="text-uppercase"> Working hours</h5>
        <div class="row">
          <!-- 日期列：占父容器的6列（即50%宽度） -->
          <div class="col-md-6">
            <p>Monday</p>
            <p>Tuesday</p>
            <p>Wednesday</p>
            <p>Thursday</p>
            <p>Friday</p>
            <p>Saturday</p>
            <p>Sunday</p>
          </div>
          
          <!-- 时段列：占父容器的6列（即50%宽度） -->
          <div class="col-md-6">
            <p>9:00 - 18:00</p>
            <p>9:00 - 18:00</p>
            <p>9:00 - 18:00</p>
            <p>9:00 - 18:00</p>
            <p>9:00 - 18:00</p>
            <p>9:00 - 18:00</p>
            <p>9:00 - 18:00</p>
          </div>
        </div>
      </div>
      
      <!-- 地图区域：占6列，与工作时间区域同级 -->
      <div class="col-md-6">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2907.301070286598!2d-79.90350282363299!3d43.22414697112562!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882c9ade812413cd%3A0xbfa94fb004dc6200!2s345%20Limeridge%20Rd%20W%2C%20Hamilton%2C%20ON%20L9C%2C%20Canada!5e0!3m2!1sen!2suk!4v1684233996645!5m2!1sen!2suk"
          width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
      </div>
    </div>
  </div>
</section>

关键调整说明 #

• 将地图容器从工作时间容器中移出，作为主row的直接子元素，确保二者在同一行并排
• 调整工作时间内部的日期和时段列为col-md-6，使其均分父容器宽度
• 将地图iframe的宽度改为100%，实现响应式适配，避免溢出

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