你如何将 Bootstrap 4 卡作为按钮。这意味着我点击卡片中的任何部分,它会调用一些 Action 。
此代码来自 Bootstrap 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>
最佳答案
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
关于twitter-bootstrap - Bootstrap 4 卡组件作为按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35619988/