OWL轮播：无法水平居中放置物品引导卡

如何解决OWL轮播：无法水平居中放置物品引导卡

我尝试制作一个包含5张Bootstrap卡的OWL轮播，但无法使这些卡水平居中。

我尝试通过给我的Bootstrap列class="col d-flex justify-content-center"进行尝试，希望它能使它们居中，但无法正常工作。

也在owl-carousel owl-theme owl-stage owl-outer-stage上尝试过。但也行不通。 我给了Bootstrap卡width: 185px。难道这就是问题所在，因为卡片的宽度不灵活吗？

已完成的轮播应具有响应性，并且应如下所示。除了我想让每个屏幕尺寸的卡都具有固定宽度，而且中间的卡始终位于导航点上方。

OWL-Carousel-1

OWL-Carousel-2

OWL-Carousel-3

这是我的代码：Codepen-OWL-Carousel

HTML

<div class="container fluid pb-5">
<div class="row mt-4 px-0 py-0 pl-sm-5 pr-sm-5">
    <div class="col m-0 p-0 pb-5 mb-2 d-flex justify-content-center">
        <div class="owl-carousel owl-theme">
            <div class="item">
                <div class="card" style="width: 185px;">
                    <div class="card-body p-0">
                        <div class="CardWrapper">
                            <img id="img-top-size" class="card-img-top pb-3" src="http://placehold.it/160x160/4DC7A0/ffffff width="" height="" class="d-inline-block"  alt="Card image cap">
                            <h5 class="card-title cardTextheading">Offer1</h5>
                            <h6 class="card-subtitle mb-4 text-muted cardTextSubheading">white</h6>
                            <p class="card-text text-left cardTextContent">Lighlyness</p>
                            
                            <p class="card-text text-left cardTextContent">Text Test 3</p>
                            
                            <p id="cardTextProductData" class="pt-2"><a href="#" class="card-link">Product data</a></p>
                            <p class="card-text cardPriceTag text-right">4,<span style="font-size: 12px;">98€/$²</span></p>
                            <p class="cardTextBottom text-right pb-0">inkc. 24% VAT + shipping</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="card" style="width: 185px;">
                    <div class="card-body p-0">
                        <div class="CardWrapper">
                            <img id="img-top-size" class="card-img-top pb-3" src="http://placehold.it/160x160/4DC7A0/ffffff width="" height="" class="d-inline-block"  alt="Card image cap">
                            <h5 class="card-title cardTextheading">Offer1</h5>
                            <h6 class="card-subtitle mb-4 text-muted cardTextSubheading">white</h6>
                            <p class="card-text text-left cardTextContent">Lighlyness</p>
                            
                            <p class="card-text text-left cardTextContent">Text Test 3</p>
                            
                            <p id="cardTextProductData" class="pt-2"><a href="#" class="card-link">Product data</a></p>
                            <p class="card-text cardPriceTag text-right">4,<span style="font-size: 12px;">98€/$²</span></p>
                            <p class="cardTextBottom text-right pb-0">inkc. 24% VAT + shipping</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.owl-carousel .owl-stage {
  display: flex;
}

.owl-carousel .owl-item {
  width: auto;
  height: 100%;
}
.owl-height {
  /* height: 450px !important; */
}

.owl-item {
  width: 200px !important;
  padding:3px;
}

.cardWrapper {
  padding: 10px 10px 0px 10px;
}

.owl-carousel .owl-item #img-top-size {
  height: 160px !important;
  width: 160px !important;
}

.cardTextheading {
  font-family: "DINPro-Medium";
  font-size: 16px;
}

.cardTextSubheading {
  font-family: "DINPro-Regular";
  font-size: 16px;
}

.cardTextContent {
  font-family: "DINPro-Medium";
  font-size: 10px;
  padding-bottom: 0;
  margin-bottom:0;
}

.cardTextBottom {
  font-family: "DINPro-Regular";
  font-size: 10px;
  color: #9A9A9A;
  text-align: left;
}

#cardTextProductData {
  font-family: "DINPro-Regular";
  font-size: 12px;
  color: #3DA9EA;
  text-align: left;
  margin-bottom: 0;
}

.CardpriceTag {
  font-family: "DINPro-Medium";
  font-size: 20px;
  color: #D0021B;
  text-align: right;
  margin-bottom:0;
  margin-top:0;
}

JS

$(document).ready(function(){
    $('.owl-carousel').owlCarousel({
        center: true,margin:5,loop:true,autoWidth:false,items:5,responsiveClass: true,responsive: {
        0:{
            items:3,center:true,nav:false
        },576:{
            items:3,768:{
            items:5,992:{
            items:5,loop:false,center:false,nav:false
        }
    } 
  });
});