为何我的Bootstrap网格部分列出现堆叠？如何调整卡片排列？

问题原因 #

你出现列堆叠的问题是因为两处代码不规范：

• 左侧地图所在的col-12 col-md-6元素没有写闭合</div>标签，导致右侧列被错误包含在左列的内部结构中，中等及以上屏幕尺寸下也无法并排显示
• 右侧的col-md-6容器内的两个col-6没有外层包裹row容器，Bootstrap网格规则要求所有col-*类元素必须放在row容器内才能触发横向弹性排列，否则会默认独占一行堆叠

修改后的代码示例 #

<div class="row">
  <!-- 左侧地图列，已补全闭合标签 -->
  <div class="col-12 col-md-6 mb-1" style="height: 75vh;">
    <div class="map svelte-xu5vn1" id="map">
      ...
    </div>
  </div>
  <!-- 右侧卡片列 -->
  <div class="col-12 col-md-6">
    <!-- 新增row容器包裹内部的col-6 -->
    <div class="row">
      <div class="col-6">
        <a rel="prefetch" href="communes/xxx/objects/Cykelhus">
          <div class="card mr-1 mb-1">
            <div class="card-body text-center">
              <img class="card-img-top" src="img/300x300/cykelhus.thumb.jpg" alt="(图片)">  
              <p class="card-text">Cykelhus</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col-6">
        <a rel="prefetch" href="communes/brf_masthugget/objects/Sedumtak">
          <div class="card mr-1 mb-1">
            ... 与上方结构一致
          </div>
        </a>
      </div>
      <!-- 后续更多卡片也可以按相同结构加在row内 -->
    </div>
  </div>
</div>

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