twitter-bootstrap 控制转盘大小的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27964713/
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
controlling the height of the carousel size
提问by moe
I am trying to make sure that my carousel size stay the same in terms of height. I am using different images and i understand the image size are different but not sure how to control the height of the image. I want my carousel height stay the same regardless of the image size so how can i control that? here is the code i am using:
我试图确保我的旋转木马尺寸在高度方面保持不变。我使用不同的图像，我知道图像大小不同但不确定如何控制图像的高度。无论图像大小如何，我都希望我的轮播高度保持不变，所以我该如何控制？这是我正在使用的代码：
<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_chania.jpg" alt="Chania" width="460" height="345">--%>
<img src="img/sleep1.jpg" alt="Chania" width="460" height="345" />
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>this is test </p>
</div>
</div>
<div class="item">
<%-- <img src="img_chania2.jpg" alt="Chania" width="460" height="345">--%>
<img src="img/image5.jpg" alt="Chania" width="460" height="345"/>
</div>
<div class="item">
<%--<img src="img_flower.jpg" alt="Flower" width="460" height="345">--%>
<img src="img/nature3.jpg" alt="Chania" width="460" height="145" />
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>this is test </p>
</div>
</div>
<div class="item">
<%--<img src="img_flower2.jpg" alt="Flower" width="460" height="345">--%>
<img src="img/nature2.jpg" alt="Chania" width="460" height="245"/>
</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>
回答by Jason Bassett
On the class .itemadd some custom CSS that overrides Bootstraps core CSS like so:
在类上.item添加一些自定义 CSS 来覆盖 Bootstraps 核心 CSS，如下所示：
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
display: block;
max-width: 100%;
height: 400px !important;
}
</style>
This will make the carousel size 400px.
这将使轮播大小为 400 像素。
By default, the height is set to auto, but since we don't want that, we manually set a size and say that it's !importantso the browser knows that this style is overruling the bootstrap css set prior.
默认情况下，高度设置为自动，但由于我们不希望那样，我们手动设置了一个大小并说它是!important这样浏览器知道这种样式否决了之前设置的引导 css。
I hope this helps and makes sense.
我希望这有帮助并且有意义。
回答by Subhanjan Basu
I solved the problem by just adding this code into the tag
我通过将此代码添加到标签中解决了这个问题
<div id="Div1" class="carousel" runat="server" style="height:800px !important;">
its automatically increase the size and if you want add width too. Thank you
它会自动增加大小，如果您也想增加宽度。谢谢
