我使用这个Bootstrap Vertical Thumbnail Carousel源代码创建引导缩略图垂直旋转木马，它在Firefox和Safari（最新版本）中的工作类似于charm，但在chrome中没有。
按“下一步”或“上一步”时，firefox和safari会出现问题。按钮，当前的图像卷轴和新的卷轴之后。但在chrome中，第二束排在第一束的前面，在第一束消失之后，
这是我的代码JS Fiddle HERE
<!DOCTYPE html>
<html lang="en">
<head>
<title>Thumbnail Slider</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body data-twttr-rendered="true" data-spy="scroll" data-target=".bs-docs-sidebar">
<div class="container">
<div class="span8">
<h1> </h1>
<div class="well" >
<div id="myCarousel" class="carousel vertical slide" >
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><img src="icon/up.png"></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><img src="icon/down.png"></a>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row-fluid">
<table>
<tr>
<td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/1.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td>
</tr>
<tr>
<td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/2.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td>
</tr>
<tr>
<td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/3.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td>
</tr>
<tr>
<td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/4.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td>
</tr>
</table>
</div><!--/row-fluid-->
</div><!--/item-->
<div class="item">
<div class="row-fluid">
<table>
<tr>
<td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/5.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td>
</tr>
<tr>
<td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/6.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td>
</tr>
<tr>
<td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/7.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td>
</tr>
<tr>
<td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/8.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td>
</tr>
</table>
</div><!--/row-fluid-->
</div><!--/item-->
<div class="item">
<div class="row-fluid">
<table>
<tr>
<td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/9.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td>
</tr>
<tr>
<td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/10.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td>
</tr>
<tr>
<td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/11.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td>
</tr>
<tr>
<td><div class="span3"><a href="#x" style = " width:50px; " class="thumbnail"><img src="image/12.gif" alt="Image" style="max-width:100%; width:50px;"></a></div></td>
</tr>
</table>
</div><!--/row-fluid-->
</div><!--/item-->
</div><!--/carousel-inner-->
</div><!--/myCarousel-->
</div><!--/well-->
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/script.js"></script>
</body>
</html>
最佳答案
问题是旋转木马容器（#myCarousel）没有明确的高度。它的子项.carousel-inner具有height:100%，但由于#myCarousel没有显式的高度，因此该百分比值没有影响，基于旋转木马项的偏移也没有影响。
最快的解决方案是设置提到的高度：
#myCarousel{
height:380px; /* or em, or some other fixed value*/
}
/* OR */
.carousel-inner{
height:380px;/* or em, or some other fixed value*/
}
Live
BU不是非常灵活的：如果你需要改变元素的数量或大小，这个高度也需要改变。