Bootstrap旋转木马调整高度答案

【问题标题】：Bootstrap carousel adjust heightBootstrap旋转木马调整高度
【发布时间】：2013-12-06 17:13:45
【问题描述】：

我是 Bootstrap 的新手，我有一个关于轮播的问题。我需要在大屏幕（个人电脑）上设置 700 像素的高度，为手机设置 500 像素的高度。我该怎么做？我把这个：

 @media (min-width: 320px){
    .carousel-caption p {
    margin-bottom: 20px;
    font-size: 20px;
    line-height: 1.4;
    }
    .carousel {
    height: 500px;
    margin-bottom: 60px;
    }

    .carousel .item {
    height: 500px;
    background-color: #777;
    }
    .carousel-inner > .item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 500px;
    }

}

我在等待回复。

谢谢！

【问题讨论】：

标签： twitter-bootstrap mobile carousel responsive

【解决方案1】：

我无法正确测试它，但是如果您想在宽度小于 320px 的设备中使用 500px 高度，您的媒体查询应该是 @media (max-height:320px) 而不是 @media (min-width:320px)。

编辑：

我测试了它，这种方法有效：

@media (max-width:320px){
  .carousel{
     height:50px;
   }
}

这样，对于宽度从 0 到 320 的分辨率，.carousel 类将具有 50px 的高度。

如果这解决了你的问题，请不要忘记投票并选择这个答案:)

【讨论】：

感谢您的回复！我已经对此进行了测试，但我认为我错了，因为我不知道如何使用媒体查询。例如，我使用 `@media (max-height:320px){...code 1...} @media (min-height:760px){...code 2...} 和媒体查询我把代码1和其他高度值放在一起（这可以理解吗？）如果你不理解我，我试着更清楚！
我不知道我是否理解你，但我想我也犯了一个错误。它是 max-width:320px （分辨率的宽度），当您获得该宽度或更少时，您希望轮播具有 height:500px 。请尝试这种方式。如果这不起作用，请尝试使用 max-height:500px;
抱歉耽搁了！我使用另一种解决方案解决了这个问题（我将高度调整为 100%，效果更好！）。无论如何，我证明了你的提示，但没有奏效......
感谢您的宝贵时间！