我有一个引导缩略图滑块,我在每行显示6张图像。但是我总共有7张图像,第一行显示6张图像,但最后一行显示空白。如何删除该空间?请帮忙,下面是代码
<div class="card">
<div class="card-body">
<h5 class="card-title" style="margin:10px "><strong>Menu</strong></h5>
<div id="multi-item-example" class="carousel slide carousel-multi-item" data-ride="carousel">
<div class="carousel-inner" role="listbox">
@if(is_null($brands['menuItem']))
<p class="text-danger" style="margin-left: 20px">no menu items.</p>
@else
@foreach(($brands['menuItem'])->chunk(6) as $menuItem)
<div class="carousel-item {{ $loop->first ? ' active' : '' }}">
@foreach($menuItem as $item)
<div class="col-6 col-sm-4 col-md-2 col-lg-2 float-left">
<a href="#">
<img src="/storage/{{$item->image}}" alt="Image"
class="img-fluid">
</a>
<br>
<h6 style="text-align: center;">RM{{$item->price}}</h6>
</div>
@endforeach
</div>
@endforeach
@endif
</div>
<a class="carousel-control-prev" data-target="#multi-item-example" role="button"
data-slide="prev" style="background-color: lightgray; width: 3%; opacity: 1; height: 87%;">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" style="background-color: lightgray; width: 3%; opacity: 1;
height: 87%;" data-target="#multi-item-example" role="button"
data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>