Twitter bootstrap 引导4个卡组件作为一个按钮

如何将引导4卡制作为按钮。这意味着我点击卡片上的任何部分，它会被调用一些动作

这段代码来自bootstrap4

<div class="card-deck-wrapper">
  <div class="card-deck">
    <div class="card">
      <img class="card-img-top" data-src="..." alt="Card image cap">
      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
    <div class="card">
      <img class="card-img-top" data-src="..." alt="Card image cap">
      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
    <div class="card">
      <img class="card-img-top" data-src="..." alt="Card image cap">
      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

卡片标题
这是一张较长的卡片，下面的支持文本是附加内容的自然引入。这个内容有点长
上次更新是在3分钟前

卡片标题
此卡片具有以下支持文本，作为附加内容的自然引入
上次更新是在3分钟前

卡片标题
这是一张更宽的卡片，下面的支持文本是附加内容的自然引入。这张卡片的内容甚至比第一张要长，以显示等高动作
上次更新是在3分钟前

使用jquery在单击div.card-deck-wrapper时添加一个函数将达到以下目的：

$('.card-deck-wrapper').on('click', function(event) {
     alert('You clicked the Bootstrap Card');
});

---

供您参考：

我也一直在做这方面的工作，但只是为了链接，而不是任何javascript操作。希望它能帮助别人

我的解决办法是在卡片里放一个按钮。以下是我的引导，供您试用：

我留下最后一张卡作为你的原始密码。它在firefox、chrome和edge中看起来还不错

需要一个小小的css来保持相同的格式：

.btn-fix {
padding: 0;
border: none;
white-space: normal;
 }

html非常相似，但是文本需要像“文本暗”和“文本左”这样的引导类来复制卡片格式

     <div class="card">
           <a href="#" class="btn btn-fix text-left">
              <img class="card-img-top " src="..." alt="Card image cap">
                <div class="card-block ">
                    <h4 class="card-title text-dark ">Card title</h4>
                    <p class="card-text text-dark ">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    <p class="card-text "><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
            </a>
        </div>

不带引导4标记的html，可用于较长的btn修复css

   <div class="card">
            <a href="#" class="btn btn-fix ">
              <img class="card-img-top " data-src="http://www.imag-e-nation.com/templates/ArtFraming/images/freeprintables/thumbnail/favourbox1_small.jpg" alt="Card image cap">
                <div class="card-block ">
                    <h4 class="card-title  ">Card title</h4>
                        <p class="card-text ">This is a longer card with 
      supporting text below as a natural lead-in to additional content. This       
   content is a little bit longer.</p>
                    <p class="card-text "><small class="text-muted">Last 
       updated 3 mins ago</small></p>
                </div>
            </a>
        </div>

只要

---

Bootstrap 4.3.x现在为此提供了

拉伸链接类

<div class="card p-2">
    <a class="card-block stretched-link text-decoration-none" href>
        <h4 class="card-title">Card title</h4>
        ...
    </a>
</div>



演示：
您可以使用锚定标签包装卡片div。但它会弄乱你的设计
<div class="card-deck-wrapper">
  <div class="card-deck">
    <a href="google.com" class="card">
      <img class="card-img-top" data-src="..." alt="Card image cap">
      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </a>
    <a class="card" href="google.com">
      <img class="card-img-top" data-src="..." alt="Card image cap">
      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </a>
    <a class="card" href="google.com">
      <img class="card-img-top" data-src="..." alt="Card image cap">
      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </a>
  </div>
</div>

<div class="card p-2">
    <a class="card-block stretched-link text-decoration-none" href>
        <h4 class="card-title">Card title</h4>
        ...
    </a>
</div>