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

另一个选择是在text-decoration-none的链接标签中使用卡类。然后，整个卡片就是一个链接：

Example in JSFiddle

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

1 个答案: