媒體查詢縮小引導程序傳送帶

Question

我正在使用引導程序版本4.0.0-beta，我正在使用傳送帶功能。當我在顯示器上查看時，我完全配置了它的使用方式。 （1920 x 1200），但想要根據用戶顯示器來更改它的高度，例如1920 x 1080.我已將旋轉木馬的高度設置爲32rem，但如果用戶在像我這樣的較小屏幕上時想縮小該尺寸說過。我相信媒體查詢是我需要的，但我已經嘗試過，並且無法弄清楚。任何人都可以照亮這個請點亮嗎？

謝謝。

Answer 1

請嘗試下面的示例，讓我知道它的工作。

.img-responsive, 
.thumbnail>img, 
.thumbnail a>img, 
.carousel-inner>.item>img, 
.carousel-inner>.item>a>img { 
    display: block; 
    width: 100%; 
    height: auto; 
} 

.carousel-inner { 
    border-radius: 15px; 
} 

.carousel-caption { 
    background-color: rgba(0, 0, 0, .5); 
    position: absolute; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    z-index: 10; 
    padding: 0 0 10px 25px; 
    color: #fff; 
    text-align: left; 
} 

.carousel-indicators { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    width: 100%; 
    z-index: 15; 
    margin: 0; 
    padding: 0 25px 25px 0; 
    text-align: right; 
} 

.carousel-control.left, 
.carousel-control.right { 
    background-image: none; 
} 

.carousel-containers { 
    padding: 10px 0; 
} 

.carousel-containers { 
    background-color: #fff; 
    color: #555; 
} 

@media screen and (min-width: 768px) { 
    .carousel-containers { 
    padding: 1.5em 0; 
    } 
} 

@media screen and (min-width: 992px) { 
    .container { 
    max-width: 930px; 
    } 
} 

<div class="carousel-containers"> 
    <div class="container"> 

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 

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


     <div class="carousel-inner"> 
     <div class="item active"> 
      <img src="http://placehold.it/800x400" alt="..."> 
      <div class="carousel-caption"> 
      <h2>Heading</h2> 
      </div> 
     </div> 
     <div class="item"> 
      <img src="http://placehold.it/800x400" alt="..."> 
      <div class="carousel-caption"> 
      <h2>Heading</h2> 
      </div> 
     </div> 
     <div class="item"> 
      <img src="http://placehold.it/800x400" alt="..."> 
      <div class="carousel-caption"> 
      <h2>Heading</h2> 
      </div> 
     </div> 
     </div> 


     <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left"></span> 
     </a> 
     <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right"></span> 
     </a> 
    </div> 

    </div> 
</div> 

Answer 2

設法解決它在我自己的。剛剛使用過這個。

@media screen and (max-height: 1000px) { 
.carousel-item { 
height: 24rem; 
}}