Bootstrap宽度显示与猫头鹰旋转木马不兼容 [英] Bootstrap width displays incorreclty with Owl carousel
本文介绍了Bootstrap宽度显示与猫头鹰旋转木马不兼容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的引导列的宽度有问题。没有猫头鹰旋转木马一切正常，但我不知道为什么它不适用于这个插件。
这些只是5个相似的代码块。每个块都以.col-md-3类开头。
此代码的结果：
$（document）.ready（function（）{$（。team-members）。owlCarousel（{autoPlay：3000， items：4，itemsDesktop：[1199,4]，itemsDesktopSmall：[973,3]}）;}）;
< section id =team> < div class =container> < h4>我们的团队< / h4> < div class =owl-carousel team-members> < div class =col-md-3 col-sm-3> < div class =member> < div class =member-img> < img src =img / man.pngalt => < / DIV> < div class =member-info> < span> Jerry Mack< / span> < I> Web的显影剂< I> /; < p> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Nulla convallis< / p> < / DIV> < div class =member-contacts> < i class =fa fa-facebook>< / i> < i id =middle-iconclass =fa fa-twitter>< / i> < i id =last-iconclass =fa fa-google-plus>< / i> < / DIV> < / DIV> < / DIV> < div class =col-md-3 col-sm-3> < div class =member> < div class =member-img> < img src =img / man.pngalt => < / DIV> < div class =member-info> < span> Jerry Mack< / span> < I> Web的显影剂< I> /; < p> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Nulla convallis< / p> < / DIV> < div class =member-contacts> < i class =fa fa-facebook>< / i> < i id =middle-iconclass =fa fa-twitter>< / i> < i id =last-iconclass =fa fa-google-plus>< / i> < / DIV> < / DIV> < / DIV> < div class =col-md-3 col-sm-3> < div class =member> < div class =member-img> < img src =img / man.pngalt => < / DIV> < div class =member-info> < span> Jerry Mack< / span> < I> Web的显影剂< I> /; < p> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Nulla convallis< / p> < / DIV> < div class =member-contacts> < i class =fa fa-facebook>< / i> < i id =middle-iconclass =fa fa-twitter>< / i> < i id =last-iconclass =fa fa-google-plus>< / i> < / DIV> < / DIV> < / DIV> < div class =col-md-3 col-sm-3> < div class =member> < div class =member-img> < img src =img / man.pngalt => < / DIV> < div class =member-info> < span> Jerry Mack< / span> < I> Web的显影剂< I> /; < p> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Nulla convallis< / p> < / DIV> < div class =member-contacts> < i class =fa fa-facebook>< / i> < i id =middle-iconclass =fa fa-twitter>< / i> < i id =last-iconclass =fa fa-google-plus>< / i> < / DIV> < / DIV> < / DIV> < div class =col-md-3 col-sm-3> < div class =member> < div class =member-img> < img src =img / man.pngalt => < / DIV> < div class =member-info> < span> Jerry Mack< / span> < I> Web的显影剂< I> /; < p> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Nulla convallis< / p> < / DIV> < div class =member-contacts> < i class =fa fa-facebook>< / i> < i id =middle-iconclass =fa fa-twitter>< / i> < i id =last-iconclass =fa fa-google-plus>< / i> < / DIV> < / DIV> < / DIV> < / DIV> < / DIV> < / section>
此代码的结果：
此代码的结果
解决方案
我找到了答案。猫头鹰旋转木马包装了.owl-item类中的所有元素，因此.col-md-3意味着.owl-item类的25％。所有你需要的是用.col-md-3在div中写这个类。
它应该是这样的：
< div class =owl-item col-md-3 col-sm-3> < div class =member> < div class =member-img> < img src =img / man.pngalt => < / DIV> < div class =member-info> < span> Jerry Mack< / span> < I> Web的显影剂< I> /; < p> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Nulla convallis< / p> < / DIV> < div class =member-contacts> < i class =fa fa-facebook>< / i> < i id =middle-iconclass =fa fa-twitter>< / i> < i id =last-iconclass =fa fa-google-plus>< / i> < / DIV> < / div>< / div>
I have an issue with width of my bootstrap columns. Without Owl carousel everything works ok, but i don't know why it doesn't work with this plugin. These are just 5 similar blocks of code. Every block starts with .col-md-3 class. The result of this code:
$(document).ready(function() {
$(".team-members").owlCarousel({
autoPlay: 3000,
items : 4,
itemsDesktop : [1199,4],
itemsDesktopSmall : [973,3]
});
});
<section id="team">
<div class="container">
<h4>Our team</h4>
<div class="owl-carousel team-members">
<div class="col-md-3 col-sm-3">
<div class="member">
<div class="member-img">
<img src="img/man.png" alt="">
</div>
<div class="member-info">
<span>Jerry Mack</span>
<i>Web-developer</i>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis</p>
</div>
<div class="member-contacts">
<i class="fa fa-facebook"></i>
<i id="middle-icon" class="fa fa-twitter"></i>
<i id="last-icon" class="fa fa-google-plus"></i>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3">
<div class="member">
<div class="member-img">
<img src="img/man.png" alt="">
</div>
<div class="member-info">
<span>Jerry Mack</span>
<i>Web-developer</i>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis</p>
</div>
<div class="member-contacts">
<i class="fa fa-facebook"></i>
<i id="middle-icon" class="fa fa-twitter"></i>
<i id="last-icon" class="fa fa-google-plus"></i>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3">
<div class="member">
<div class="member-img">
<img src="img/man.png" alt="">
</div>
<div class="member-info">
<span>Jerry Mack</span>
<i>Web-developer</i>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis</p>
</div>
<div class="member-contacts">
<i class="fa fa-facebook"></i>
<i id="middle-icon" class="fa fa-twitter"></i>
<i id="last-icon" class="fa fa-google-plus"></i>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3">
<div class="member">
<div class="member-img">
<img src="img/man.png" alt="">
</div>
<div class="member-info">
<span>Jerry Mack</span>
<i>Web-developer</i>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis</p>
</div>
<div class="member-contacts">
<i class="fa fa-facebook"></i>
<i id="middle-icon" class="fa fa-twitter"></i>
<i id="last-icon" class="fa fa-google-plus"></i>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3">
<div class="member">
<div class="member-img">
<img src="img/man.png" alt="">
</div>
<div class="member-info">
<span>Jerry Mack</span>
<i>Web-developer</i>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis</p>
</div>
<div class="member-contacts">
<i class="fa fa-facebook"></i>
<i id="middle-icon" class="fa fa-twitter"></i>
<i id="last-icon" class="fa fa-google-plus"></i>
</div>
</div>
</div>
</div>
</div>
</section>
The result of this code: The result of this code
解决方案
I've found the answer. Owl carousel wraps every element in .owl-item class, so .col-md-3 means 25% of .owl-item class. All you need is write this class in the div with .col-md-3. It should be something like this:
<div class="owl-item col-md-3 col-sm-3">
<div class="member">
<div class="member-img">
<img src="img/man.png" alt="">
</div>
<div class="member-info">
<span>Jerry Mack</span>
<i>Web-developer</i>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis</p>
</div>
<div class="member-contacts">
<i class="fa fa-facebook"></i>
<i id="middle-icon" class="fa fa-twitter"></i>
<i id="last-icon" class="fa fa-google-plus"></i>
</div>
</div>
</div>
这篇关于Bootstrap宽度显示与猫头鹰旋转木马不兼容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
![此代码的结果](\"https://i.stack.imgur.com/AXGMC.png\"){kind=link}
