如何讓Bootstrap Carousel適合100％屏幕？

Question

我想知道如何讓Bootstrap's Carousel example中的旋轉木馬適合100％的屏幕顯示，而不是它現在顯示的方式，允許一些空白的圓形圖像在加載時被包含在主着陸頁中。

Here's a simple illustration of what I'm trying to get working.

頁面的源代碼（相關位）：

<!-- Carousel 
    ================================================== --> 
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
    <li data-target="#myCarousel" data-slide-to="1"></li> 
    <li data-target="#myCarousel" data-slide-to="2"></li> 
    </ol> 
    <div class="carousel-inner" role="listbox"> 
    <div class="item active"> 
     <img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide"> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>Example headline.</h1> 
      <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p> 
      <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p> 
     </div> 
     </div> 
    </div> 
    <div class="item"> 
     <img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide"> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>Another example headline.</h1> 
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
      <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p> 
     </div> 
     </div> 
    </div> 
    <div class="item"> 
     <img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide"> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>One more for good measure.</h1> 
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
      <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p> 
     </div> 
     </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><!-- /.carousel --> 

carousel.css（相關位）：

/* CUSTOMIZE THE CAROUSEL 
-------------------------------------------------- */ 

/* Carousel base class */ 
.carousel { 
    height: 500px; 
    margin-bottom: 60px; 
} 
/* Since positioning the image, we need to help out the caption */ 
.carousel-caption { 
    z-index: 10; 
} 

/* Declare heights because of positioning of img element */ 
.carousel .item { 
    height: 500px; 
    background-color: #777; 
} 
.carousel-inner > .item > img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    min-width: 100%; 
    height: 500px; 
} 

我知道手頭的任務是相當簡單的，我承認我已經在過去的一個小時左右嘗試了修改carousel.css文件（改變各種高度位置，z-index等值），但我似乎無法得到調整大小t o工作沒有大幅度地搞砸了。更具體地說，我嘗試添加

Answer 1

試圖擺弄當前版本的傳送帶上提供引導的網站後，我纔想通，試圖找到一個變通爲他們提供的代碼也只是更多的麻煩比它的價值。

因此，我找到了this example，而只是用the one provided by their source - starting at the 'header'替換了旋轉木馬HTML，並將carousel.css中的傳送帶部分替換爲their full-slider.css part。

最終代碼看起來是這樣的：

HTML

<!-- Full Page Image Background Carousel Header --> 
<header id="myCarousel" class="carousel slide"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
    </ol> 

    <!-- Wrapper for Slides --> 
    <div class="carousel-inner"> 
     <div class="item active"> 
      <!-- Set the first background image using inline CSS below. --> 
      <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div> 
      <div class="carousel-caption"> 
       <h2>Caption 1</h2> 
      </div> 
     </div> 
     <div class="item"> 
      <!-- Set the second background image using inline CSS below. --> 
      <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div> 
      <div class="carousel-caption"> 
       <h2>Caption 2</h2> 
      </div> 
     </div> 
     <div class="item"> 
      <!-- Set the third background image using inline CSS below. --> 
      <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div> 
      <div class="carousel-caption"> 
       <h2>Caption 3</h2> 
      </div> 
     </div> 
    </div> 

    <!-- Controls --> 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
     <span class="icon-prev"></span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
     <span class="icon-next"></span> 
    </a> 

</header> 

CSS

/* CUSTOMIZE THE CAROUSEL 
-------------------------------------------------- */ 
.carousel, 
.item, 
.active { 
    height: 100%; 
    margin-bottom: 60px; 
} 

.carousel-inner { 
    height: 100%; 
} 

/* Background images are set within the HTML using inline CSS, not here */ 

.fill { 
    width: 100%; 
    height: 100%; 
    background-position: center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 
} 

海事組織，這個版本是很容易反正閱讀。感謝@ K.C。尋求幫助！

Answer 2

您已爲傳送帶和傳送帶物品固定高度。那麼它顯然會是這樣的大小。

試試這個

html,body{ 
    height:100%; 
} 
.carousel,.item,.active{ 
    height:100%; 
} 
.carousel-inner{ 
    height:100%; 
} 

Look at this question for demo and more.

即使改變也不會工作，那麼你可以用這一個在這裏 DEMO

還通過jQuery可以先更換你的旋轉木馬後，獲取窗戶的總高度，並將其設置爲相應的輪播包裝和其他元素的高度。

$(document).ready(function(){ 
    var height = $(window).height(); //getting windows height 
    jQuery('#myCarousel').css('height',height+'px'); //and setting height of carousel 
}); 

Answer 3

有點遲到黨...但晚了，那麼我從來沒有想過。

無論如何，我採取了不同的方法。

CSS：

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

.Outside { 
    background-image: url("../Your/Image/Path/Outside.jpg"); 
    z-index: -2; 
    display: block; 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: 50% 50%; 
} 

HTML：

<div id="carousel1" class="carousel carousel-fade" data-ride="carousel"> 

<!-- Indicators --> 
    <ol class="carousel-indicators"> 
    <li data-target="#carousel1" data-slide-to="0" class="active"></li> 
    <li data-target="#carousel1" data-slide-to="1"></li> 
    <li data-target="#carousel1" data-slide-to="2"></li> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 
    <div class="item active"> 
     <div class="Outside"></div> 
     <div class="carousel-caption"> 
     </div> 
    </div> 
    </div> 
</div> 

希望這有助於。