我在使整个 Bootstrap 4 Card 可点击时遇到问题。我使用的是 HTML5 和 Bootstrap 4,无法使包含的卡片可点击。图像和文本是可点击的,但我希望用户能够点击框上的任意位置。我试过用链接包装它,卡片看起来可以点击,但并非完全如此。感谢帮助
代码笔: https://codepen.io/anon/pen/PVNXgV
HTML
<div class="container">
<div class="card-deck flex-row flex-nowrap">
<div class="card">
<a href="http://google.com"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Alberobello_BW_2016-10-16_13-43-03.jpg/250px-Alberobello_BW_2016-10-16_13-43-03.jpg" alt="Card image cap"></a>
<a href="http://google.com">
<!-- THIS DIV IS NOT CLICKABLE BUT I WANT IT TO BE -->
<div class="card-body">
<a href="http://google.com"><h3 class="card-sub align-middle">Card Title</h3></a>
<p class="time-card">2 Days Ago</p>
</div><!-- END CARD-BODY -->
</a>
</div><!-- END CARD -->
</div><!-- END CARD DECK -->
</div><!-- END CONTAINER -->
CSS
.card-container{
max-width:1400px;
width:95%;
}
.card-body{
max-width:250px;
padding-left:10px;
margin-top:0px;
transition:.3s;
-webkit-transition:.3s;
}
.card-deck{
margin-bottom:3.2rem;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.front-deck{
padding-top:12rem;
}
.card{
margin-right:16px;
border:none;
flex: 0 0 auto;
}
.card .card-body:first-of-type{
border:2px solid #96cecf;
border-top:0px;
}
最佳答案
在 Bootstrap 4 中,您可以使用 stretched-link
类,它也不会改变卡片中文本的颜色。
来源:https://getbootstrap.com/docs/4.3/utilities/stretched-link/#identifying-the-containing-block
例子:
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card with stretched link</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
</div>
</div>
记得在大多数情况下给父类添加.position-relative
。有关详细信息,请参阅上面的链接。
关于css - 使 Bootstrap 卡片完全可点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54404865/