使用 Owl carousel 时引导宽度显示不正确

Question

我的引导列的宽度存在问题。没有 Owl carousel 一切正常，但我不知道为什么它不适用于这个插件。 这些只是 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 carousel 包装了 .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>