Почему съезжает на следующую строку блок в сетки Bootstrap?
1.9K
1
Не могу понять в чем проблема.Создал три блока с использованием сетки Bootstrap.Как мне кажется все указал правильно,но третий блок съезжает на следующую строку и сужается.Вот сам код:
<div class="row thumbnails">
<div class="col-lg-4">
<div class="thumbnail">
<div class="carousel slide" id="carousel_hotel1">
<!-- Обертка для слайдов -->
<div class="carousel-inner">
<div class="item active">
<img src="assets/img/content/best_tours/Hotel 1/slide1.jpg" alt="slide1" class="img-responsive">
</div><!-- Конец item active -->
<div class="item">
<img src="assets/img/content/best_tours/Hotel 1/slide2.jpg" alt="slide2" class="img-responsive">
</div><!-- Конец item -->
<div class="item">
<img src="assets/img/content/best_tours/Hotel 1/slide3.jpg" alt="slide3" class="img-responsive">
</div><!-- Конец item -->
<div class="item">
<img src="assets/img/content/best_tours/Hotel 1/slide4.jpg" alt="slide4" class="img-responsive">
</div><!-- Конец item -->
<div class="item">
<img src="assets/img/content/best_tours/Hotel 1/slide5.jpg" alt="slide5" class="img-responsive">
</div><!-- Конец item -->
<div class="item">
<img src="assets/img/content/best_tours/Hotel 1/slide6.jpg" alt="slide6" class="img-responsive">
</div><!-- Конец item -->
<div class="item">
<img src="assets/img/content/best_tours/Hotel 1/slide7.jpg" alt="slide7" class="img-responsive">
</div><!-- Конец item -->
<div class="item">
<img src="assets/img/content/best_tours/Hotel 1/slide8.jpg" alt="slide8" class="img-responsive">
</div><!-- Конец item -->
<div class="item">
<img src="assets/img/content/best_tours/Hotel 1/slide9.jpg" alt="slide9" class="img-responsive">
</div><!-- Конец item -->
<div class="item">
<img src="assets/img/content/best_tours/Hotel 1/slide10.jpg" alt="slide10" class="img-responsive">
</div><!-- Конец item -->
<div class="item">
<img src="assets/img/content/best_tours/Hotel 1/slide11.jpg" alt="slide11" class="img-responsive">
</div><!-- Конец item -->
</div><!-- Конец carousel-inner -->
<!-- Контролеры -->
<a class="left carousel-control" data-slide="prev" href="#carousel_hotel1"><span class="icon-prev"></span></a>
<a class="right carousel-control" data-slide="next" href="#carousel_hotel1"><span class="icon-next"></span></a>
</div><!-- Конец carousel slide -->
<div class="caption">
<p><img src="assets/img/content/best_tours/star.png" alt="star"><img src="assets/img/content/best_tours/star.png" alt="star"><img src="assets/img/content/best_tours/star.png" alt="star"></p>
<h5><a href="#" class="title-hotel">Отель Blue Sea Callao Garden 3*</a></h5>
<div class="row">
<div class="col-xs-9">
<h6>Кальвао-Сальвахе,Испания</h6>
</div><!-- Конец col-10 -->
<div class="col-xs-3 margin-top" >
<a href="#" id="href_comment">28 отзывов</a>
</div><!-- Конец col-2 -->
</div><!-- Конец row -->
<div class="row">
<div class="col-xs-9">
<div class="col-xs-4 padding-left_text">
<p>350 м до моря</p>
</div><!-- Конец col-xs-4 -->
<div class="col-xs-4 padding-left_text">
<p>песчанный пляж</p>
</div><!-- Конец col-xs-4 -->
<div class="col-xs-4 padding-left_text">
<p>есть Wi-Fi</p>
</div><!-- Конец col-xs-4 -->
</div><!-- col-xs-9 -->
</div><!-- Конец row -->
<div class="row">
<div class="col-lg-12">
<a href="#" class="btn btn-default btn-block myButton1">Посмотреть тур от <span class="bold">80 590 руб</span></a>
</div><!-- Конец col-lg-12 -->
</div><!-- Конец row -->
<div class="row">
<div class="margin-two"></div>
<div class="col-md-12">
<p class="footer-text">Цена на двоих за 6 ночей (7 дней)<br>
Перелет 10 февраля из Москвы<br>
Питание: без питания</p>
</div><!-- Конец col-md-12 -->
</div><!-- Конец row -->
</div><!-- Конец caption -->
</div><!-- Конец thumbnail -->
</div><!-- Конец col-lg-4 -->
<div class="col-lg-4">
<div class="thumbnail">
<div class="carousel slide" id="carousel_hotel2">
<!-- Обертка для слайдов -->
<div class="carousel-inner">
<div class="item active">
<img src="assets/img/content/best_tours/Hotel 2/slide1.jpg" alt="slide1" class="img-responsive">
</div><!-- Конец item active -->
<div class="item">
<img src="assets/img/content/best_tours/Hotel 2/slide2.jpg" alt="slide2" class="img-responsive">
</div><!-- Конец item -->
<div class="item">
<img src="assets/img/content/best_tours/Hotel 2/slide3.jpg" alt="slide3" class="img-responsive">
</div><!-- Конец item -->
<div class="item">
<img src="assets/img/content/best_tours/Hotel 2/slide4.jpg" alt="slide4" class="img-responsive">
</div><!-- Конец item -->
<div class="item">
<img src="assets/img/content/best_tours/Hotel 2/slide5.jpg" alt="slide5" class="img-responsive">
</div><!-- Конец item -->
<div class="item">
<img src="assets/img/content/best_tours/Hotel 2/slide6.jpg" alt="slide6" class="img-responsive">
</div><!-- Конец item -->
<div class="item">
<img src="assets/img/content/best_tours/Hotel 2/slide7.jpg" alt="slide7" class="img-responsive">
</div><!-- Конец item -->
<div class="item">
<img src="assets/img/content/best_tours/Hotel 2/slide8.jpg" alt="slide8" class="img-responsive">
</div><!-- Конец item -->
<div class="item">
<img src="assets/img/content/best_tours/Hotel 2/slide9.jpg" alt="slide9" class="img-responsive">
</div><!-- Конец carousel-inner -->
<!-- Контролеры -->
<a class="left carousel-control" data-slide="prev" href="#carousel_hotel2"><span class="icon-prev"></span></a>
<a class="right carousel-control" data-slide="next" href="#carousel_hotel2"><span class="icon-next"></span></a>
</div><!-- Конец carousel slide -->
<div class="caption">
<p><img src="assets/img/content/best_tours/star.png" alt="star"><img src="assets/img/content/best_tours/star.png" alt="star"><img src="assets/img/content/best_tours/star.png" alt="star"><img src="assets/img/content/best_tours/star.png" alt="star"><img src="assets/img/content/best_tours/star.png" alt="star"></p>
<h5><a href="#" class="title-hotel">Отель Gran Melia Palacio de Isora 5*</a></h5>
<div class="row">
<div class="col-xs-9">
<h6>Тенерифе,Испания</h6>
</div><!-- Конец col-10 -->
<div class="col-xs-3 margin-top" >
<a href="#" id="href_comment">10 отзывов</a>
</div><!-- Конец col-2 -->
</div><!-- Конец row -->
<div class="row">
<div class="col-xs-9">
<div class="col-xs-4 padding-left_text">
<p>150 м до моря</p>
</div><!-- Конец col-xs-4 -->
<div class="col-xs-4 padding-left_text">
<p>песчанный пляж</p>
</div><!-- Конец col-xs-4 -->
<div class="col-xs-4 padding-left_text">
<p>есть Wi-Fi</p>
</div><!-- Конец col-xs-4 -->
</div><!-- col-xs-9 -->
</div><!-- Конец row -->
<div class="row">
<div class="col-lg-12">
<a href="#" class="btn btn-default btn-block myButton1">Посмотреть тур от <span class="bold">140 890 руб</span></a>
</div><!-- Конец col-lg-12 -->
</div><!-- Конец row -->
<div class="row">
<div class="margin-two"></div>
<div class="col-md-12">
<p class="footer-text">Цена на двоих за 7 дней<br>
Перелет 5 февраля из Москвы<br>
Питание: только завтрак</p>
</div><!-- Конец col-md-12 -->
</div><!-- Конец row -->
</div><!-- Конец caption -->
</div><!-- Конец thumbnail -->
</div><!-- Конец col-lg-4 -->
<div class="col-lg-4">
<div class="thumbnail">
<div class="carousel slide" id="carousel_hotel3">
<!-- Обертка для слайдов -->
<div class="carousel-inner">
<div class="item active">
<img src="assets/img/content/best_tours/Hotel 3/slide1.jpg" alt="slide1" class="img-responsive">
</div><!-- Конец item active -->
<div class="item">
<img src="assets/img/content/best_tours/Hotel 3/slide2.jpg" alt="slide2" class="img-responsive">
</div><!-- Конец item -->
<div class="item">
<img src="assets/img/content/best_tours/Hotel 3/slide3.jpg" alt="slide3" class="img-responsive">
</div><!-- Конец item -->
<div class="item">
<img src="assets/img/content/best_tours/Hotel 3/slide4.jpg" alt="slide4" class="img-responsive">
</div><!-- Конец item -->
<div class="item">
<img src="assets/img/content/best_tours/Hotel 3/slide5.jpg" alt="slide5" class="img-responsive">
</div><!-- Конец item -->
<div class="item">
<img src="assets/img/content/best_tours/Hotel 3/slide6.jpg" alt="slide6" class="img-responsive">
</div><!-- Конец item -->
<div class="item">
<img src="assets/img/content/best_tours/Hotel 3/slide7.jpg" alt="slide7" class="img-responsive">
</div><!-- Конец item -->
</div><!-- Конец carousel-inner -->
<!-- Контролеры -->
<a class="left carousel-control" data-slide="prev" href="#carousel_hotel3"><span class="icon-prev"></span></a>
<a class="right carousel-control" data-slide="next" href="#carousel_hotel3"><span class="icon-next"></span></a>
</div><!-- Конец carousel slide -->
<div class="caption">
<p><img src="assets/img/content/best_tours/star.png" alt="star"><img src="assets/img/content/best_tours/star.png" alt="star"><img src="assets/img/content/best_tours/star.png" alt="star"><img src="assets/img/content/best_tours/star.png" alt="star"><img src="assets/img/content/best_tours/star.png" alt="star"></p>
<h5><a href="#" class="title-hotel">Отель Gran Melia Palacio de Isora 5*</a></h5>
<div class="row">
<div class="col-xs-9">
<h6>Тенерифе,Испания</h6>
</div><!-- Конец col-10 -->
<div class="col-xs-3 margin-top" >
<a href="#" id="href_comment">10 отзывов</a>
</div><!-- Конец col-2 -->
</div><!-- Конец row -->
<div class="row">
<div class="col-xs-9">
<div class="col-xs-4 padding-left_text">
<p>150 м до моря</p>
</div><!-- Конец col-xs-4 -->
<div class="col-xs-4 padding-left_text">
<p>песчанный пляж</p>
</div><!-- Конец col-xs-4 -->
<div class="col-xs-4 padding-left_text">
<p>есть Wi-Fi</p>
</div><!-- Конец col-xs-4 -->
</div><!-- col-xs-9 -->
</div><!-- Конец row -->
<div class="row">
<div class="col-lg-12">
<a href="#" class="btn btn-default btn-block myButton1">Посмотреть тур от <span class="bold">140 890 руб</span></a>
</div><!-- Конец col-lg-12 -->
</div><!-- Конец row -->
<div class="row">
<div class="margin-two"></div>
<div class="col-md-12">
<p class="footer-text">Цена на двоих за 7 дней<br>
Перелет 5 февраля из Москвы<br>
Питание: только завтрак</p>
</div><!-- Конец col-md-12 -->
</div><!-- Конец row -->
</div><!-- Конец caption -->
</div><!-- Конец thumbnail -->
</div><!-- Конец col-lg-4 -->
</div><!-- Конец row-->
Комментарии: 1
У вас третий блок попал внутрь второго. Попробуйте вот этот вариант: