Bootstrap链接移动端堆叠时如何实现等高（不受内容影响）

嘿，我来帮你搞定这个问题！首先先指出一个小细节：你的CSS里定义的类名是.equal-heights，但HTML里给a标签加的是equal-height，少了个s，这会导致你写的等高样式压根没生效，先把这个笔误修正过来哦～

接下来咱们聊聊核心问题：为什么桌面端能等高，移动端不行？

桌面端时，Bootstrap的row默认是flex布局，col-md-4作为flex子元素会被自动拉伸到和最高列一样的高度，这时候你给a标签设置height:100%能顺利继承父列的高度，所以看起来是等高的。但到了移动端，col-md-4会变成block布局，高度由自身内容决定，这时候height:100%就找不到有效的高度参照了，自然没法保持等高。

下面给你两种简单的解决方案：

方案1：用Bootstrap内置工具类（推荐） #

Bootstrap本身提供了很多flex相关的工具类，不用自己写太多自定义CSS就能解决问题：

修改后的HTML代码：

<div class="container"> 
  <div class="row"> 
    <div class="col-md-4"> 
      <a class="link h-100 d-flex justify-content-center align-items-center" href="#"> 
        <div> 
          <p class="link-text"> ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate facere illum, mollitia nam odit provident repellendus voluptas? A accusamus accusantium ad adipisci aliquam culpa debitis dolore doloremque ea eaque eos eum. </p> 
        </div> 
      </a> 
    </div> 
    <div class="col-md-4"> 
      <a class="link h-100 d-flex justify-content-center align-items-center" href="#"> 
        <div><p class="link-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, doloribus.</p></div> 
      </a> 
    </div> 
    <div class="col-md-4"> 
      <a class="link h-100 d-flex justify-content-center align-items-center" href="#"> 
        <div><p class="link-text"> Link Three</p></div> 
      </a> 
    </div> 
  </div>
</div>

简化后的CSS代码：

.link{ 
  width: 100%; 
  padding: 10px 15px; 
} 

原理说明： #

• h-100：让a标签占满父容器（col-md-4）的100%高度
• d-flex、justify-content-center、align-items-center：代替你原来写的flex布局样式，实现内容居中
• row默认的flex布局会让所有col-md-4始终保持等高，不管是桌面横向排列还是移动端堆叠，a标签继承列的高度自然就等高了

方案2：自定义CSS适配 #

如果你更倾向于用自己的类名来控制，那可以调整CSS让列始终保持flex容器：

修正后的HTML（先把类名改对）：

<div class="container"> 
  <div class="row"> 
    <div class="col-md-4"> 
      <a class="link equal-height" href="#"> 
        <div> 
          <p class="link-text"> ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate facere illum, mollitia nam odit provident repellendus voluptas? A accusamus accusantium ad adipisci aliquam culpa debitis dolore doloremque ea eaque eos eum. </p> 
        </div> 
      </a> 
    </div> 
    <div class="col-md-4"> 
      <a class="link equal-height" href="#"> 
        <div><p class="link-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, doloribus.</p></div> 
      </a> 
    </div> 
    <div class="col-md-4"> 
      <a class="link equal-height" href="#"> 
        <div><p class="link-text"> Link Three</p></div> 
      </a> 
    </div> 
  </div>
</div>

修改后的CSS代码：

.link{ 
  padding: 10px 15px; 
} 

.equal-height {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

/* 让列始终作为flex容器，确保a标签能继承高度 */
.row .col-md-4 {
  display: flex;
}

原理说明： #

• 给col-md-4添加display:flex，让它不管在桌面还是移动端都是flex容器
• equal-height类的height:100%就能继承flex容器的高度，而row的flex布局会让所有列保持等高，最终实现a标签在任何屏幕下都等高

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