Bootstrap旋轉木馬高度以適合屏幕尺寸

-1

我正在開發一個網站，並且首次使用bootstrap和css讓我的手變髒。我使用自舉傳送帶並使用帶有2個幻燈片的基本傳送帶。不過，我無法將幻燈片的高度設置爲屏幕高度。我試着調整旋轉木馬的高度到100％，但它不能正常工作（延伸到屏幕高度之外）。如果我給像素高度，如高度：500px;它工作正常。但我希望它適合整個屏幕。有關我如何實現這一目標的任何幫助？Bootstrap旋轉木馬高度以適合屏幕尺寸

HTML：

<div class="container-fluid after-navbar"> 
    <div class="container-fluid "> 
    <div class="row row-content"> 
     <div class="col-xs-12"> 
     <div id="mycarousel" class="carousel slide carousel-height" data-ride="carousel"> 
      <ol class="carousel-indicators"> 
      <li data-target="#mycarousel" data-slide-to="0" class="active"></li> 
      <li data-target="#mycarousel" data-slide-to="1"></li> 
      </ol> 
      <div class="carousel-inner carousel-height" role="listbox"> 
      <div class="item active carousel-height"> 
       <%= image_tag("bg1.jpg", class: "img-responsive") %> 
       <div class="carousel-caption"> 
       <h2>BLAH </h2> 
       </div>       
      </div> 
      <div class="item"> 
       <a href="#"><%= image_tag("bg1.jpg", class: "img-responsive") %></a> 
       <div class="carousel-caption"> 
       <h2>BLAH</h2>       
       </div> 
      </div>      
      </div> 
      <a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev"> 
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
      <span class="sr-only">Previous</span> 
      </a> 
      <a class="right carousel-control" href="#mycarousel" role="button" data-slide="next"> 
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
      <span class="sr-only">Next</span> 
      </a> 
     </div> 
     </div> 
    </div> 
    </div> 
</div>

CSS：

.carousel { 
    background: $bgDefault; 
} 
.carousel .item { 
    height: 100%; 
} 
.carousel .item img { 
    left: 0; 
    height: 100%; 
    position: absolute; 
    top: 0; 
}

來源

2016-01-11 Megha D S

http://www.bootply.com/59900可能會幫助 –

它看起來像是你在另一個容器流體中有一個容器流體，第二個將是多餘的，它所做的只是在兩側添加填料 – jsg

也許把100％的高度傳送帶的高度一樣，那麼100％的高度增加了身體和HTML元素，因此會是：

.carousel{ 
    height:100%; 
} 
body, html{ 
    height:100%; 
}

如果這不工作則可以添加：

.container-fluid.after-navbar{ 
    height:100%; 
} 

.row-content, .row-content > .col-xs-12{ 
    height:100%; 
}

來源

2016-01-11 11:52:07 jsg

Bootstrap旋轉木馬高度以適合屏幕尺寸

回答

相關問題