將Bootstrap傳送帶調整到全高

如何將傳送帶的高度設置爲Full，我希望它在用戶打開頁面時佔用屏幕，而且對於移動設備的行爲相同。將Bootstrap傳送帶調整到全高

當訪問該網站時，carusel必須佔據整個查看區域，不應該可以在不滾動Scrool的情況下將文字「我們的服務」可視化。

<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> 
     <li data-target="#myCarousel" data-slide-to="3"></li> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 

     <div class="item active"> 
     <img src="img\portfolio\concretobombeado.jpg" alt="Chania" width="460" height="345"> 
     <div class="carousel-caption"> 
      <h3>Chania</h3> 
      <p>The atmosphere in Chania has a touch of Florence and Venice.</p> 
     </div> 
     </div> 

     <div class="item"> 
     <img src="img\portfolio\limpeza.jpg" alt="Chania" width="460" height="345"> 
     <div class="carousel-caption"> 
      <h3>Chania</h3> 
      <p>The atmosphere in Chania has a touch of Florence and Venice.</p> 
     </div> 
     </div> 

     <div class="item"> 
     <img src="img\portfolio\limpeza.jpg"alt="Flower" width="460" height="345"> 
     <div class="carousel-caption"> 
      <h3>Flowers</h3> 
      <p>Beatiful flowers in Kolymbari, Crete.</p> 
     </div> 
     </div> 

     <div class="item"> 
     <img src="img\portfolio\limpeza.jpg" alt="Flower" width="460" height="345"> 
     <div class="carousel-caption"> 
      <h3>Flowers</h3> 
      <p>Beatiful flowers in Kolymbari, Crete.</p> 
     </div> 
     </div> 

    </div> 

    <!-- Left and right controls --> 
    <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>

來源

2017-03-27 Paulo Roberto

你可以將它添加到你的css文件。

#myCarousel{ 
height:100vh; 
width:100%; 
}

100vh會將您的carousal的高度設置爲設備屏幕高度的100％。

這將設置您的carousal的高度和寬度佔據整個屏幕。

之後，您可能還需要將.carousel-inner類的高度修改爲100％。那麼你可以相應地調整你的圖像的寬度。

來源

2017-03-27 17:34:21 lhavCoder

必須設置外部div的高度與id="myCarousel"至100％。因此，將其添加到css文件或html文件中。太用你需要的全高來設置<html>和<body>的高度爲100％（通常是一個css文件中的前兩個類）。

來源

2017-03-27 17:09:16 pudi

您必須製作傳送帶圖像及其任何容器100％的高度。

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

Demo

來源

2017-03-27 17:16:13 ZimSystem

它部分工作，看看應用此CSS後的圖像是如何：http://imgur.com/a/FNy5B –

在CSS中會有其他的東西會導致這種情況。確保你提供了所有相關的代碼。 – ZimSystem

像其他的答案，你必須#myCarousel的高度設置爲100％。你可以做的另一件事，可能會幫助你使用vh而不是像素來代替你的元素，比如文本。

根據你的形象，我判斷你說葡萄牙語。所以，這裏有一個關於CSS單位的幫助。 Unidades de CSS Moderno

而這裏是W3C指南，它不是explains the same而是用英文。 PS：我會補充這個成pudi的答案，但我真的沒有足夠的聲譽這樣做的評論。

來源

2017-03-27 17:21:15

將Bootstrap傳送帶調整到全高

回答

相關問題