Bootstrap 4 卡组件作为按钮

Question

如何将 bootstrap 4 卡制作为按钮。这意味着我点击卡片中的任何部分都会调用一些操作。

此代码来自引导程序 4

<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>

Answer 1

Bootstrap 4.3.x 现在为此提供了 stretched-link 类。

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

演示：https://www.codeply.com/go/VfxYt2AVDL

Answer 2

我也一直在研究这个，但只是为了链接，而不是任何 javascript 操作。希望它可以帮助某人。

我的解决方案是在卡片内放置一个按钮。这是我的 bootply 供您试用：
https://www.bootply.com/o8iMXqiBRt

我将最后一张卡片作为您的原始密码。它在 firefox、chrome 和 edge 中看起来不错。

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

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

html 非常相似，但文本需要像“text-dark”和“text-left”这样的引导类来复制卡片格式。

     <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>

或者您可以向 btn-fix css 添加更多类：

.btn-fix {
padding: 0;
border: none;
white-space: normal;
color: black;
text-align: left;
}

不带 Bootstrap 4 标签的 html 可与较长的 btn-fix 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>

Answer 3

在点击 div.card-deck-wrapper 时使用 jquery 添加一个函数就可以了：

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

供您参考：Jquery Click Event

Answer 4

只要 是 display: block|flex 应该没问题。它还可以与键盘导航和辅助功能一起使用。

<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>