问题描述
目前我正在使用 bootstrap 4,我正在尝试为桌面和移动设备创建卡片组视图。
对于桌面,出于某种原因,如果 card-columns
中没有 card-deck
类,我无法制作 3 列 4 行的网格。
当我尝试从移动端查看时,它只显示 1 列。
代码如下:
<div class="container">
<div class="row justify-content-center">
<div class="col-12">
<div class="card-deck">
<div class="card-columns">
@foreach($items as $key => $item)
<div class="card" style="background-color:#ffffff;">
<a class="stretched-link" href="#" data-toggle="modal" data-target="#productModal" onclick="removeErrors();showProductModal({!! $item['id'] !!});resetQuantity();"></a>
<div class="row">
<div class="col-12">
<img class="center size" src="{{URL::asset('images/product/27.jpeg')}}">
</div>
<div class="col-12">
<h6>{!! $item['name'] !!}</h6>
</div>
<div class="col-12">
<h6 class="text-danger">{!! config('app.currency').' '.($item['unit_price'] - $item['discount_amount']) !!}</h6>
</div>
</div>
</div>
@endforeach
</div>
</div>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)