问题描述
我尝试制作一个包含5张Bootstrap卡的OWL轮播,但无法使这些卡水平居中。
我尝试通过给我的Bootstrap列class="col d-flex justify-content-center"
进行尝试,希望它能使它们居中,但无法正常工作。
也在owl-carousel owl-theme owl-stage owl-outer-stage
上尝试过。但也行不通。
我给了Bootstrap卡width: 185px
。难道这就是问题所在,因为卡片的宽度不灵活吗?
已完成的轮播应具有响应性,并且应如下所示。除了我想让每个屏幕尺寸的卡都具有固定宽度,而且中间的卡始终位于导航点上方。
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
}
}
});
});
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)