Bootstrap 3卡片排版异常及对齐问题的CSS修复方案咨询

嘿，我帮你排查了代码里的问题，主要是Bootstrap网格结构错误加上自定义CSS的硬编码冲突导致的，下面给你一步步解决：

问题1：第一行无法显示3张卡片的原因及修复 #

你的HTML结构存在明显的嵌套错误：

• 卡片没有统一放在同一个.row容器内，反而被多余的</div>和<br>标签拆分成了多个零散的块，完全打乱了Bootstrap的网格布局逻辑（Bootstrap要求所有.col-*列必须直接隶属于同一个.row）。
• 修复方式：把4张卡片的.col-lg-4 col-md-6都包裹在一个.row里，移除所有多余的闭合标签和<br>，用Bootstrap的mb-4类给卡片添加底部间距。

问题2：页面缩放时卡片像素级对齐偏差的原因及修复 #

自定义CSS里的硬编码样式直接破坏了Bootstrap的响应式特性：

• 你给.front设置了固定的width:750px、height:750px和margin-left:20%，这些样式完全覆盖了Bootstrap列的自适应宽度，导致缩放时卡片无法随容器调整，自然会出现对齐偏差。
• 另外.details的绝对定位没有配合响应式单位，也会在缩放时错位。
• 修复方式：删除所有硬编码的固定宽高和强制margin，改用相对单位和Bootstrap的内置类来控制样式，同时用媒体查询适配不同屏幕尺寸。

修正后的完整代码 #

HTML代码

<div class="row">
  <!-- 徒步旅行卡片 -->
  <div class="col-lg-4 col-md-6 mb-4">
    <div class="front">
      <div>
        <img class="girlimg" src="girl.jpg" alt="Guided hiking tours" />
        <h2 class="activname">Guided hiking tours</h2>
        <button class="activbutt" type="button" name="button"> SEE DETAILS </button>
      </div>
      <div class="details">
        <div class="duration">
          <i class="fas fa-clock"></i> Duration
        </div>
        <div class="people">
          <i class="fas fa-user-friends"></i><br />
          <p>Max adults:10</p>
        </div>
        <div class="kids">
          <i class="fas fa-child"></i><br />
          <p>Max children:3</p>
        </div>
      </div>
    </div>
  </div>

  <!-- 租自行车卡片 -->
  <div class="col-lg-4 col-md-6 mb-4">
    <div class="front">
      <div>
        <img class="girlimg" src="bike.jpg" alt="Rent a bike" />
        <h2 class="activname">Rent a bike(4 hours)</h2>
        <button class="activbutt" type="button" name="button"> SEE DETAILS </button>
      </div>
      <div class="details">
        <div class="duration">
          <i class="fas fa-clock"></i> Duration <p>QUARTER DAY</p>
        </div>
        <div class="people">
          <i class="fas fa-user-friends"></i><br />
          <p>Max adults:9</p>
        </div>
        <div class="kids">
          <i class="fas fa-child"></i><br />
          <p>Max children:0</p>
        </div>
      </div>
    </div>
  </div>

  <!-- 攀岩卡片 -->
  <div class="col-lg-4 col-md-6 mb-4">
    <div class="front">
      <div>
        <img class="girlimg" src="climbing.jpg" alt="Climbing" />
        <h2 class="activname">Climbing</h2>
        <button class="activbutt" type="button" name="button"> SEE DETAILS </button>
      </div>
      <div class="details">
        <div class="duration">
          <i class="fas fa-clock"></i> Duration <p>FULL DAY</p>
        </div>
        <div class="people">
          <i class="fas fa-user-friends"></i><br />
          <p>Max adults:5</p>
        </div>
        <div class="kids">
          <i class="fas fa-child"></i><br />
          <p>Max children:1</p>
        </div>
      </div>
    </div>
  </div>

  <!-- 独木舟卡片 -->
  <div class="col-lg-4 col-md-6 mb-4">
    <div class="front">
      <div>
        <img class="girlimg" src="canoe.jpg" alt="Canoe" />
        <h2 class="activname">Canoe</h2>
        <button class="activbutt" type="button" name="button"> SEE DETAILS </button>
      </div>
      <div class="details">
        <div class="duration">
          <i class="fas fa-clock"></i> Duration <p>QUARTER DAY</p>
        </div>
        <div class="people">
          <i class="fas fa-user-friends"></i><br />
          <p>Max adults:6</p>
        </div>
        <div class="kids">
          <i class="fas fa-child"></i><br />
          <p>Max children:2</p>
        </div>
      </div>
    </div>
  </div>
</div>

CSS代码

/* 卡片基础样式，随Bootstrap列宽自适应 */
.front {
  margin-top: 30px;
  background-color: #F7F4F2;
  border-radius: 10%;
  padding: 20px;
  position: relative;
  height: 100%; /* 确保同一行卡片高度一致 */
}

/* 图片自适应容器宽度，避免溢出 */
.girlimg {
  width: 100%;
  height: auto;
  border-radius: 10%;
}

.details {
  position: absolute;
  top: 15%;
  right: 20px;
  font-size: 18px;
  display: flex;
  flex-direction: column;
  gap: 25%; /* 用gap替代margin-bottom，布局更灵活 */
}

.activname {
  font-size: 24px;
  margin: 10px 0;
  padding-left: 7%;
}

.activbutt {
  background-color: #ffcc66;
  border-radius: 2%;
  font-size: 18px;
  padding: 12px 20px;
  border: none;
  margin-left: 20%;
}

/* 大屏设备适配，放大字号保证视觉效果 */
@media (min-width: 992px) {
  .details {
    font-size: 30px;
  }
  .activname {
    font-size: 45px;
  }
  .activbutt {
    font-size: 30px;
    padding: 20px;
  }
}

额外优化说明 #

1. 用mb-4替代<br>：符合Bootstrap的间距规范，避免硬编码换行导致的布局混乱。
2. height:100%统一卡片高度：解决不同内容长度导致的卡片对齐偏差。
3. 响应式图片：图片宽度设为100%，确保在任何屏幕尺寸下都不会超出卡片容器。
4. 媒体查询适配：大屏时放大字号，兼顾移动端和桌面端的视觉体验。
5. 语义化修复：调整了<i>标签的嵌套方式，图标和文本分开，符合HTML语义规范。

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