猫头鹰轮播滑块：内容的位置不正确

如何解决猫头鹰轮播滑块：内容的位置不正确

我在我的 Laravel 应用程序中集成了一个 owl carousel 滑块（试图让它变得动态）。我想显示 4 个产品，并修改代码以便在两侧显示下一个和上一个按钮。但是对齐有缺陷。我在这里分享滑块的图像视图：请检查照片，所有问题都在那里描述

我的代码是：

<div class="owl-carousel owl-theme">

                    @foreach($bootcamps as $bootcamp)

                        <div>
                            <div class="bootcamp-card">
                                <div class="row">
                                    <div class="col-12 col-md-12">
                                        <div class="row bootcamp-thumbnail" style="overflow: 
                                            hidden">
                                            <img 
                                     style="width:100%!important;height:100%!important" src=" 
                                  {{asset('img/cart/course-thumb.png')}}" alt="">
                                        </div>
                                        <div class="row bootcamp-category p-0 pt-2">
                                            <div class=""><span class="course-type">Ethical 
                           hacking</span> <span class="certification">certificate</span></div>
                                        </div>
                                        <div class="row bootcamp-title">
                                            Threat Hunting using Wireshark
                                        </div>
                                        <div class="row bootcamp-info">
                                            <table>
                                                <tr>
                                                    <td style="width: 40%"><b>Programs :</b> 
                                                   </td>
                                                    <td style="width: 60%">Online Live 
                                               Class</td>
                                                </tr>
                                                <tr>
                                                    <td><b>Location :</b></td>
                                                    <td>{{$bootcamp->location}}</td>
                                                </tr>
                                                <tr>
                                                    <td><b>Cost :</b></td>
                                                    <td><b>${{$bootcamp->cost}}</b></td>
                                                </tr>
                                                <tr>
                                                    <td><b>Date :</b></td>
                                                    <td>{{date('jS M,Y',strtotime($bootcamp- 
                                            >event_start))}} – {{date('jS M,strtotime($bootcamp->event_end))}}</td>
                                                </tr>
                                            </table>
                                        </div>
                                        <div class="row p-0 pt-2">
                                            <a href="#" class="form-control book-button" 
                                            style="text-align: center;" data-toggle="modal"
                                               data-target="#bootcamp-registration">Book 
                                               Now</a>
                                            <a href="{{url('cart')}}" class="add-to-cart">Add 
                                        to cart</a>
                                        </div>
                                    </div>

                                </div>
                            </div>

                        </div>

                    @endforeach
                        <div class="owl-controls">
                            <div class="owl-nav">
                                <div class="owl-prev">Prev</div>
                                <div class="owl-next">Next</div>
                            </div>
                            <div class="owl-dots">
                                <div class="owl-dot active"><span></span></div>
                                <div class="owl-dot"><span></span></div>
                                <div class="owl-dot"><span></span></div>
                            </div>
                        </div>
                </div>

            </div>

来自 jQuery 的代码：

$(document).ready(function(){
        $('.owl-carousel').owlCarousel({
            loop:true,autoplay :true,dots :false,margin:10,responsiveClass:true,responsive:{
                0:{
                    items:1,nav:true
                },600:{
                    items:2,1000:{
                    items:4,nav:true,loop:true,navText : ['<i class="fa fa-angle-left" aria-hidden="true"></i>','<I 
                    class="fa fa-angle-right" aria-hidden="true"></i>']
                }
            }
        })
    });

来自 CSS 的代码：

.owl-prev {
    width: 15px;
    height: 100px;
    position: absolute;
    top: 40%;
    margin-left: -70px;
    display: block !important;
    border:0px solid black;
    outline:none!important;
    font-size: 100px;
}

.owl-next {
    width: 15px;
    height: 100px;
    position: absolute;
    top: 40%;
    right: -15px;
    display: block !important;
    border:0px solid black;
    outline:none!important;
    font-size: 20px;
}
.owl-prev i,.owl-next i {transform : scale(1,6); color: #ccc;}

.fa-angle-left,.fa-angle-right{
    width:60px;
    height:15px;
    background: rgba(0,0.3);
    color: white!important;
    font-size:15px!important;
}