Проблемы при изменении размера карусели бутстрапа

Question

Итак, я использую bootstrap для одного из первых случаев, и у меня возникают проблемы с изменением размера карусели на одной из моих страниц с градиентным фоном в теле и наложением bg в содержимом раздел.

Итак, в первой ссылке я реализую один и тот же код, но при изменении размера по вертикали контейнер не перекрывает содержимое.

Как получить вторую ссылку, чтобы быть такой, и я все еще хочу, чтобы она правильно изменялась для разных разрешений. Я просто хочу, чтобы контейнер находился в фиксированной позиции ниже содержимого.

http://thehedonistproject.com/launch/index.html

http://thehedonistproject.com/launch/trader-dans.html

<section class="slider" id="slider"> 
    <div class="carousel slide" data-ride="carousel" id="myCarousel"> 
     <!-- Indicators --> 


     <ol class="carousel-indicators"> 
      <li class="active" data-slide-to="0" data-target="#myCarousel"> 
      </li> 


      <li data-slide-to="1" data-target="#myCarousel"> 
      </li> 


      <li data-slide-to="2" data-target="#myCarousel"> 
      </li> 


      <li data-slide-to="3" data-target="#myCarousel"> 
      </li> 


      <li data-slide-to="4" data-target="#myCarousel"> 
      </li> 


      <li data-slide-to="5" data-target="#myCarousel"> 
      </li> 


      <li data-slide-to="6" data-target="#myCarousel"> 
      </li> 


      <li data-slide-to="7" data-target="#myCarousel"> 
      </li> 


      <li data-slide-to="8" data-target="#myCarousel"> 
      </li> 


      <li data-slide-to="9" data-target="#myCarousel"> 
      </li> 
     </ol> 
     <!-- Wrapper for slides --> 


     <div class="carousel-inner" role="listbox"> 
      <div class="item active"><img alt="" src="img/photos/trader-dans/photo1.jpg"> 
      </div> 


      <div class="item"><img alt="" src="img/photos/trader-dans/photo4.jpg"> 
      </div> 


      <div class="item"><img alt="" src="img/photos/trader-dans/photo3.jpg"> 
      </div> 


      <div class="item"><img alt="" src="img/photos/trader-dans/photo2.jpg"> 
      </div> 


      <div class="item"><img alt="" src="img/photos/trader-dans/photo5.jpg"> 
      </div> 


      <div class="item"><img alt="" src="img/photos/trader-dans/photo6.jpg"> 
      </div> 


      <div class="item"><img alt="" src="img/photos/trader-dans/photo7.jpg"> 
      </div> 


      <div class="item"><img alt="" src="img/photos/trader-dans/photo8.jpg"> 
      </div> 


      <div class="item"><img alt="" src="img/photos/trader-dans/photo9.jpg"> 
      </div> 


      <div class="item"><img alt="" src="img/photos/trader-dans/photo10.jpg"> 
      </div> 
     </div> 
     <!-- Left and right controls --> 
     <a class="left carousel-control" data-slide="prev" href="#myCarousel" role="button"><span aria-hidden="true" class="glyphicon glyphicon-chevron-left"><span class="sr-only">Previous</span></span></a> <a class="right carousel-control" data-slide="next" href="#myCarousel" role="button"><span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span></a> 
    </div> 
</section> 

Answer 1

Советую, что для эффективного редактирования начальной загрузки карусели, связать таблицы стилей в документах, например, папке bootstrap\docs\example\carousel к вашему HTML и редактировать эту таблицу стилей. Так как вы хотите, чтобы изменить размер по вертикали, изменение высоты этих трех в carousel.css

.carousel { 
    height: 500px; 
    margin-bottom: 60px; 
} 
.carousel .item { 
    height: 500px; 
    background-color: #777; 
} 
.carousel-inner > .item > img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    min-width: 100%; 
    height: 500px; 
} 

Это работал для меня.