引导程序缩略图滑块,最后一个缩略图之后的空白

时间:2018-07-13 08:32:08

标签: twitter-bootstrap

我有一个引导缩略图滑块,我在每行显示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>

thats the last image with blank space

0 个答案:

没有答案