Question

这是bootstrap carousel，我尝试使用col-xs-12或sm使其更小并适合更小的屏幕。但似乎我的旋转木马的拉伸图像如何使其正常尺寸？

＆＃13;

<div id="myCarousel" class="carousel slide">
	    <ol class="carousel-indicators">
	        <li data-target="#myCarousel" data-slide-to="0" class="" contenteditable="false"></li>
	        <li data-target="#myCarousel" data-slide-to="1" class="active" contenteditable="false"></li>
	        <li data-target="#myCarousel" data-slide-to="2" class="" contenteditable="false"></li>
	    </ol>
	    <div class="carousel-inner">
	    	<div class="item" style="">
	            <img src="images/wallpapers/3iK5Pf1.jpg" alt="first-img" class="img-responsive col-xs-12 col-sm-12">
	            <div class="carousel-caption">
	            </div>
	        </div>
	        <div class="item active">
	            <img src="images/wallpapers/3iK5Pf.jpg" alt="second-img" class="img-responsive col-xs-12 col-sm-12">
	            <div class="carousel-caption">
	            </div>
	        </div>
	        <div class="item" style="">
	            <img src="images/wallpapers/3iK5Pf2.jpg" alt="third-img" class="img-responsive col-xs-12 col-sm-12">
	            <div class="carousel-caption">
	            </div>
	        </div>
	    </div>    

	    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
	        <span class="glyphicon glyphicon-chevron-left"></span>
	    </a>

	    <a class="right carousel-control" href="#myCarousel" data-slide="next">
	        <span class="glyphicon glyphicon-chevron-right"></span>
	    </a>
	</div>

＆＃13;

Answer 1

尝试在img标签的上部div中调用“col-xs-12 col-sm-12”这些类。像

前：

<div class="item col-xs-12 col-sm-12" style="">
            <img src="images/wallpapers/3iK5Pf1.jpg" alt="first-img" class="img-responsive">
            <div class="carousel-caption">
            </div>
        </div>

bootstrap carousel拉伸图像

1 个答案: