Почему сетка Bootstrap неправильно работает с Owl Carousel?

Question

[Гриша Никольский]

Привет. Мне нужно создать секцию с карточками, где будут отображаться члены команды. На одном "слайде" Owl Carousel должно отображаться 4 карточки. + мне нужно расположить их по сетке Bootstrap'а. Если плагин убрать, то все отлично отображается. Хочу заметить, что при более мелких расширениях нежели 1199 px отображает нормально(3-2 карточки на слайде). Вот так выглядит результат кода:

Относительно HTML не пугайтесь, там просто 5 одинаковых блоков кода.
HTML

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

$(document).ready(function() {
        $(".team-members").owlCarousel({
			autoPlay: 3000,
			items : 4,
			itemsDesktop : [1199,4],
			itemsDesktopSmall : [973,3]
		});
    });

Comments

[id_baton4eg]

ну указано же кол-во итемов в карусели, для чего бутстраповские классы там вообще ? Засунь в col-хх-12 и настрой яваскриптом где и сколько отображать...
itemsDesktop : [1199,4],
itemsDesktopSmall : [973,3]

Answer 1

[Гриша Никольский]

Т.к каждый элемент оборачивается в .owl-item автоматически, то .col-md-3 означает 25% именно от этого класса. Поэтому следует вместе с .col-md-3 прописывать руками .owl-item, чтобы эти классы висели на одном Div'е. В таком случае все BootStrap'овские классы работают исправно.
P.S Спасибо откликнувшимся!

Answer 2

[Kjuri]

Насколько я знаю, owl-карусель сама по себе рассчитана на адаптив, т.е. можно указать интервал и, в зависимости от разрешения, должна адаптироваться. Т.е. пытаться ее запихнуть в бутстрап - это во-первых странно, а во-вторых, чревато осложнениями.

Answer 3

[lavezzi1]

Полюбому owl-carousel к слайдерам добавляет position: absolute, от этого у тебя и получается что в колонках пустота и они схлопываются.

Comments

[Гриша Никольский]

И как решить эту проблему?

[Сергей delphinpro]

Гриша Никольский: убрать бутстраповские классы и в настройках карусели указать 4 элемента items: 4

[Сергей delphinpro]

Проблема не в в абсолютах.
Карусель оборачивает каждый элемент в свой див owl-item. класс .col-sm-3 означает ширину 25%. 25% от owl-item. Думаю понятно теперь , почему они так ужимаются.

[Гриша Никольский]

Сергей: Это конечно работает, но в таком случае отступы, которые предусмотрены сеткой BootStrap делать руками средствами margin?

[Гриша Никольский]

Сергей: все, проблема решена. Сейчас напишу полноценный ответ, дабы людей не смущать)