twitter-bootstrap Bootstrap 轮播调整高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20429739/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap carousel adjust height
提问by Microsource
I'm new in Bootstrap and I have a question about carousel. I need to set a height of 700px on big screens (pcs) and a height of 500px for cell phones. How can I do it? I put this:
我是 Bootstrap 的新手，我有一个关于轮播的问题。我需要在大屏幕（pc）上设置 700px 的高度，在手机上设置 500px 的高度。我该怎么做？我把这个：
@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;
}
}
I wait for a response.
我在等待回应。
Thanks!
谢谢！
采纳答案by luidgi27
I can't test it right know, but if you want to have the 500px height in devices with a width smaller than 320px you're media query should be @media (max-height:320px)instead of @media (min-width:320px).
我无法测试它知道对不对，但如果你想在一个宽度小于320px的你是媒体查询应该是设备500px的高度@media (max-height:320px)，而不是@media (min-width:320px)。
EDIT:
编辑：
I tested it and this way works:
我测试了它，这种方式有效：
@media (max-width:320px){
.carousel{
height:50px;
}
}
This way from resolutions that have width from 0 to 320, the .carouselclass will have 50px of height.
这样，从宽度为 0 到 320 的分辨率，.carousel类将有 50px 的高度。
If this solve your problem please don't forget to vote up and select this answer :)
如果这解决了您的问题，请不要忘记投票并选择此答案:)
