2015-09-05 3 views
0

Всякий раз, когда я пытаюсь отредактировать высоту карусели Bootstrap в процентном отношении (например, 100%), карусель не отвечает. Как сделать его высотой 100%?Пробег карусели Bootstrap

<div class="carousel-inner" role="listbox"> 
    <div class="item"> 
     <img class="first-slide" src="https://www.apple.com/osx/elcapitan-preview/static/osx-preview/overview/hero/image_large.jpg" alt="First slide"> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>Utah Unicycling Society</h1> 
      <p>The only Unicycling Society in Utah</p> 
     </div> 
     </div> 
    </div> 
    <div class="item"> 
     <img class="second-slide" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/187/cache/canyons-utah_18730_990x742.jpg" alt="Second slide"> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <a href="Our-Team.html" id="join"><h1 style="color:#FFF">Join Us!</h1></a> 
      <p>Today, millions of people are realizing that unicycling is great. Join the Utah Unicycling Society, and become a better unicyler today.</p> 
     </div> 
     </div> 
    </div> 
    <div class="item active"> 
     <img class="third-slide" src="New pictures/Hands Low.jpg" alt="Third slide"> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <a href="Donations.html" id="join"><h1 style="color:#FFF">Donate</h1></a> 
      <p>We can't get money if you don't donate!</p> 
     </div> 
     </div> 
    </div> 
    <div class="item"> 
     <img class="fourth-slide" src="TheRoad.jpg" alt="Fourth slide"> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>The Road to Success</h1> 
      <p>Here at Utah Unicycling Society, we believe in the road to success, and follow it every day.</p> 
     </div> 
    </div> 
    </div> 
    </div> 

и CSS

.carousel-inner{ 
    width:100%; 
    height:100%; 
    } 

Пожалуйста, помогите, если вы можете !!!

+0

Просьба привести пример кода такого поведения, чтобы мы могли его отладить. –

+0

Вы пробовали изменить размер внешней карусели? Кроме того, высота: 100% не означает 100% экрана, это означает, что внутренняя часть карусели и ее содержимое заполняют всю высоту div его внутри/чуть выше. – CHoltzman

+0

Это мой сайт, если вы хотите его увидеть – NoobCoder

ответ

0

Карусель ответит на ваш img. Определить класс «слайд» с высоты вы хотите нравится:

.first-slide { 
    height: 300px; 
    max-height: 300px; 
} 

ли, что для всех четырех слайдов.

Смежные вопросы