让Bootstrap的横向卡片完全可点击

后端开发 2026-07-09

当我用a href包裹一个水平卡片时，它就变成竖向的。

是否有办法让整个h.card都可点击？

  <section>
    <div class="container">
      <div class="row">
    <a href="http://google.com">
          <div class="card mb-3" style="">
            <div class="row g-0">
              <div class="col-md-6">
                <img src="pic.jpg" class="img-fluid rounded-start" alt="">
              </div>
              <div class="col-md-6">
                <div class="card-body">
                  <h5 class="card-title">Hello world</h5>
                </div>
              </div>
            </div>
          </div>
    </a>
      </div>
    </div>
  </section>

解决方案

与其把卡片包裹在 <a> 中，不如将锚点设为块级元素，让它的行为像卡片一样：

<a href="http://google.com" class="text-decoration-none text-dark d-block">
  <div class="card mb-3">
    <div class="row g-0">
      <div class="col-md-6">
        <img src="pic.jpg" class="img-fluid rounded-start" alt="">
      </div>
      <div class="col-md-6">
        <div class="card-body">
          <h5 class="card-title">Hello world</h5>
        </div>
      </div>
    </div>
  </div>
</a>

我认为你也可以用同样的方式搭配 stretched-link :

<div class="card mb-3 position-relative">
  <div class="row g-0">
    <div class="col-md-6">
      <img src="pic.jpg" class="img-fluid rounded-start" alt="">
    </div>
    <div class="col-md-6">
      <div class="card-body">
        <h5 class="card-title">Hello world</h5>
        <a href="http://google.com" class="stretched-link"></a>
      </div>
    </div>
  </div>
</div>

站内所有文章版权归属LeftHeroAI导航站，无授权禁止任何主体转载、抄袭、复制内容，亦不得私自架设镜像站点。一经侵权，本站将通过法律途径追责。