我一直在使用Bootstrap的旋转木马类,到目前为止一直很简单,但是我遇到的一个问题是不同高度的图像导致箭头上下弹跳以适应新的高度.
这是我用于旋转木马的代码:
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="image_url_300height"/>
<div class="carousel-caption">
<h4>...</h4>
<p>...</p>
</div>
</div>
<div class="item">
<img src="image_url_700height" />
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
Run Code Online (Sandbox Code Playgroud)
这个问题也在这个jsfiddle中得到了说明(不可否认,我试图解决这个问题时,我在一个单独的问题上发现了这个问题!)
我的问题是:如何强制旋转木马停留在固定高度(小提琴中的第二个缩略图)并居中较小的图像,同时将标题和箭头保持在相对于旋转木马的静态位置?