HTML卡片中Stretched Link无法实现拉伸效果问题求助

问题根源 #

你把col-md-6和card类合并到同一个<div>上，导致Bootstrap的stretched-link无法正确识别可拉伸的容器范围。stretched-link需要依托一个设置了position: relative的父容器来实现全屏点击效果，这种混合布局类和组件类的写法会干扰定位上下文。

修复后的代码 #

把card嵌套在col-md-6内部，保持层级独立：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<div class="row">
  <div class="col-md-6">
    <div class="card">
      <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/images/43.webp" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">Card with stretched link</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="https://google.com" class="btn btn-primary stretched-link">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

关键点说明 #

• Bootstrap的card组件默认自带position: relative，刚好满足stretched-link的定位需求。
• 布局类（col-*）负责控制网格宽度，组件类（card）负责卡片样式，分开使用能避免样式冲突，确保stretched-link正常生效。

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