媒体查询缩小引导程序传送带

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; 
}}