你好,我有一个引导轮播,我想修改它的大小,但我做不到,我试图对主类应用修改,但我只设法减小轮播本身的大小,而不是轮播图片,如何设置自定义尺寸?
轮播代码:
<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/paso1.png" alt="Facebook" class="img-responsive">
</div>
<div class="item">
<img src="img/paso2.png" alt="Geolocalisacion" class="img-responsive">
</div>
<div class="item">
<img src="img/paso3.png" alt="Pedir" class="img-responsive">
</div>
<div class="item">
<img src="img/paso4.png" alt="Recibir" class="img-responsive">
</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>
尝试修改“myCarousel”的大小,这不会影响照片的大小,当尝试按百分比修改照片的大小时,也没有任何反应。
Carousel 的 CSS 已
height
设置为.carousel
和.carousel-inner > .item > img
. 您必须同时更改:这是一个例子:https ://jsfiddle.net/cedfkkn6/
另一个只有百分比值的例子(它们是相对于容器的):https ://jsfiddle.net/cedfkkn6/1/
尝试
carousel-inner img
调整图像大小并carousel-inner
调整轮播本身的大小,请参阅:CSS