如何让Bootstrap水平卡片整体可点击且保持原有布局？

问题出在<a>标签默认是行内元素，直接包裹块级的.card元素会干扰Bootstrap的网格布局规则，导致水平卡片变成垂直排列。下面给你几种可行的解决方法：

方法一：使用Bootstrap内置的stretched-link类（推荐） #

Bootstrap提供了stretched-link类，无需改动原有DOM结构，就能让链接覆盖整个卡片区域，同时保持水平布局：

<section>
  <div class="container">
    <div class="row">
      <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>
              <!-- 在卡片内部添加带stretched-link类的a标签 -->
              <a href="http://google.com" class="stretched-link"></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

原理：stretched-link利用CSS绝对定位特性，让链接元素铺满整个相对定位的父容器（.card默认是相对定位），实现点击整个卡片跳转的效果。

方法二：将<a>标签设置为块级元素 #

给<a>标签添加Bootstrap的d-block类，把它转为块级元素，就不会破坏内部的网格布局：

<section>
  <div class="container">
    <div class="row">
      <!-- 添加d-block类让a标签变为块级元素 -->
      <a href="http://google.com" class="d-block">
        <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>

也可以自定义CSS实现：a { display: block; }，但使用框架内置类更符合规范。

方法三：用JavaScript绑定点击事件 #

如果不想修改DOM结构，可给.card元素绑定点击事件触发跳转：

<section>
  <div class="container">
    <div class="row">
      <div class="card mb-3" id="clickableCard" style="cursor: pointer;">
        <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>
    </div>
  </div>
</section>

<script>
document.getElementById('clickableCard').addEventListener('click', function() {
  window.location.href = 'http://google.com';
});
</script>

这种方法适合需要复杂交互逻辑的场景，同时不影响原有布局。

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