twitter-bootstrap Bootstrap 4 卡组件作为按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35619988/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 card components as a button
提问by phongyewtong
How do you make bootstrap 4 card as a button. Meaning that i click on any part in the card it some action gets called.
你如何将引导程序 4 卡作为按钮。这意味着我点击卡片中的任何部分，就会调用一些操作。
This code is from 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>
回答by grahamlander
I have been working on this as well, but just for links, not any javascript action. Hope it helps someone.
我也一直在研究这个，但只是为了链接，而不是任何 javascript 操作。希望它可以帮助某人。
My solutions is to put a button inside the card. Here is my bootply for you to try out:
https://www.bootply.com/o8iMXqiBRt
我的解决方案是在卡内放置一个按钮。这是我的 bootply 供您试用：https://www.bootply.com/o8iMXqiBRt
I left the last card as your original code. It looks ok in firefox, chrome, and edge.
我把最后一张卡片留作你的原始代码。它在 Firefox、Chrome 和 Edge 中看起来不错。
a tiny css is required to maintain the same formatting:
需要一个很小的 css 来保持相同的格式：
.btn-fix {
padding: 0;
border: none;
white-space: normal;
}
The html is very similar but text will need bootstrap classes like "text-dark" and "text-left" to copy the card formatting.
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>
or you can add a couple more classes to the btn-fix css:
或者您可以向 btn-fix css 添加更多类：
.btn-fix {
padding: 0;
border: none;
white-space: normal;
color: black;
text-align: left;
}
html without the Bootstrap 4 tags that works with the longer btn-fix css
html 没有 Bootstrap 4 标签，可以与更长的 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>
回答by Zim
Bootstrap 4.3.xnow provides the stretched-linkclass for this purpose.
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>
回答by phazei
As long as <a> is display: block|flex it should be fine. It will also still work with keyboard navigation and accessibility.
只要 <a> 是 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>
回答by John Roca
Adding a function on click the div.card-deck-wrapper using jquery will do the trick:
使用 jquery 添加一个点击 div.card-deck-wrapper 的函数就可以了：
$('.card-deck-wrapper').on('click', function(event) {
alert('You clicked the Bootstrap Card');
});
For your reference: Jquery Click Event
供您参考：Jquery 点击事件
