引导宽度与猫头鹰轮播显示不一致

Question

我的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>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

Answer 1

我找到了答案。猫头鹰轮播包装了.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.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>