如何使用 Bootstrap 4 制作可点击的卡片

Question

我正在使用bootstrap-4，我想制作可点击的卡片，但出于某种原因：

<div class="col-12 col-md-6 col-lg-6 mx-lg-auto col-xl-6">
     <div class="card card--industry mb-4">
         <a href="{{ $industry->url }}" class="card-block">
             <div class="row no-gutters">
                <div class="col-md-4">
                   <img src="{{ asset('storage/'. $industry->icon) }}" class="card-img rounded-0" alt="{{ $industry->name }}" />
                </div>
                <div class="col-md-8">
                   <div class="card-body">
                       <h3 class="card-title">{!! $industry->link !!}</h3>
                       <div class="card-text">
                          {!! $industry->short_description !!}
                       </div>
                       <a href="{{ $industry->url }}" class="card-link d-block mt-4">Read more</a>
                   </div>
                </div>
            </div>
         </a>
     </div>
</div>

它完全搞砸了 DOM，但我没有错过任何结束标签，所以我想知道是否有关于使用引导程序的可点击卡片的东西？

有人可以帮忙吗？

Answer 1

Bootstrap 有一个功能：

Bootstrap stretched link

另一种选择是在带有text-decoration-none 的链接标签中使用卡片类。那么，整张卡片就是一个链接：

Example in JSFiddle