正如我所说，当旋转木马循环时，其内部元素的高度变小，直到到达下一帧。我有人可以对这个问题有所了解，我会非常感激它，这是必须要修复的东西，它让我疯狂了所有其他可食用的东西。
html：
<div id="shop-crsl-1" class="carousel slide shop-crsl hidden-xs" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active row">
<div class="col-sm-4">
<div class="shop-col-item">
<div class="photo">
<img src="images/sc/shop-crsl-1.png" class="img-responsive" alt="a">
</div>
<div class="info">
<div>
<div class="price">
<h5>Casual Suit</h5>
<h5 class="main-text-color">$199.99</h5>
</div>
<div class="rating">
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
<div class="btns clear-left">
<p class="btn-add"><i class="fa fa-shopping-cart"></i><a href="#">Add to cart</a></p>
<p class="btn-details"><i class="fa fa-list"></i><a href="#">More details</a></p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="shop-col-item">
<div class="photo">
<img src="images/sc/shop-crsl-2.png" class="img-responsive" alt="a">
</div>
<div class="info">
<div>
<div class="price">
<h5>Night Suit</h5>
<h5 class="main-text-color">$249.99</h5>
</div>
<div class="rating">
</div>
</div>
<div class="btns clear-left">
<p class="btn-add"><i class="fa fa-shopping-cart"></i><a href="#">Add to cart</a></p>
<p class="btn-details"><i class="fa fa-list"></i><a href="#">More details</a></p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="shop-col-item">
<div class="photo">
<img src="images/sc/shop-crsl-3.png" class="img-responsive" alt="a">
</div>
<div class="info">
<div>
<div class="price">
<h5>Elegant Suit</h5>
<h5 class="main-text-color">$149.99</h5>
</div>
<div class="rating">
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
<div class="btns clear-left">
<p class="btn-add"><i class="fa fa-shopping-cart"></i><a href="#">Add to cart</a></p>
<p class="btn-details"><i class="fa fa-list"></i><a href="#">More details</a></p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<div class="item row">
<div class="col-sm-4">
<div class="shop-col-item">
<div class="photo">
<img src="images/sc/shop-crsl-1.png" class="img-responsive" alt="a">
</div>
<div class="info">
<div>
<div class="price">
<h5>Super-Casual Suit</h5>
<h5 class="main-text-color">$199.99</h5>
</div>
<div class="rating">
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
<div class="btns clear-left">
<p class="btn-add"><i class="fa fa-shopping-cart"></i><a href="#">Add to cart</a></p>
<p class="btn-details"><i class="fa fa-list"></i><a href="#">More details</a></p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="shop-col-item">
<div class="photo">
<img src="images/sc/shop-crsl-2.png" class="img-responsive" alt="a">
</div>
<div class="info">
<div>
<div class="price">
<h5>Super-Night Suit</h5>
<h5 class="main-text-color">$249.99</h5>
</div>
<div class="rating">
</div>
</div>
<div class="btns clear-left">
<p class="btn-add"><i class="fa fa-shopping-cart"></i><a href="#">Add to cart</a></p>
<p class="btn-details"><i class="fa fa-list"></i><a href="#">More details</a></p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="shop-col-item">
<div class="photo">
<img src="images/sc/shop-crsl-3.png" class="img-responsive" alt="a">
</div>
<div class="info">
<div>
<div class="price">
<h5>Super-Elegant Suit</h5>
<h5 class="main-text-color">$149.99</h5>
</div>
<div class="rating">
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
<div class="btns clear-left">
<p class="btn-add"><i class="fa fa-shopping-cart"></i><a href="#">Add to cart</a></p>
<p class="btn-details"><i class="fa fa-list"></i><a href="#">More details</a></p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Controls -->
<div class="controls">
<a class="left fa fa-chevron-left" href="#shop-crsl-1" data-slide="prev"> </a>
<a class="right fa fa-chevron-right" href="#shop-crsl-1" data-slide="next"> </a>
</div>
</div>
心爱的css
.shop-crsl {
position: relative;
overflow: hidden;
-webkit-backface-visibility: hidden;
padding: 0 15px;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
}
.shop-crsl .controls a {
position: absolute;
top: 50%;
width: 100%;
line-height: 53px;
width: 50px;
border-radius: 2px;
text-align: center;
margin-top: -30px;
font-size: 11px;
height: 50px;
transition: all 0.35s ease;
-webkit-transition: all 0.35s ease;
-moz-transition: all 0.35s ease;
-o-transition: all 0.35s ease;
-ms-transition: all 0.35s ease;
}
.shop-crsl .controls a:hover {
text-decoration: none;
}
.shop-crsl .controls .left {
left: 15px;
position: absolute;
padding-right: 3px;
}
.shop-crsl .controls .right {
right: 15px;
position: absolute;
padding-left: 3px;
}
.shop-col-item:hover {
cursor: pointer;
}
.shop-promo {
text-align: center;
padding: 15px;
border-radius: 5px;
margin-bottom: 10px;
}
.shop-promo h3 {
margin-top: 20px;
}
.shop-promo .title {
font-size: 42px;
line-height: 48px;
padding: 12px 0;
padding-bottom: 22px;
}
.shop-promo .button {
margin: 24px 0;
}
.shop-promo p {
margin: 10px 0;
}
.shop-col-item {
}
.shop-col-item .photo {
border-radius: 5px;
}
.shop-col-item .photo img {
margin: 0 auto;
width: 100%;
}
.shop-col-item .info {
padding: 10px;
border-radius: 0 0 5px 5px;
margin-top: 1px;
}
.shop-col-item .price {
width: 50%;
float: left;
margin-top: 5px;
}
.shop-col-item .price h5 {
line-height: 20px;
margin: 0;
}
.shop-col-item .rating {
width: 50%;
float: left;
font-size: 17px;
text-align: right;
line-height: 52px;
margin-bottom: 10px;
height: 52px;
}
.shop-col-item .btn-add {
width: 50%;
float: left;
}
.shop-col-item .btn-details {
width: 50%;
float: left;
padding-left: 10px;
}
.shop-col-item .btn-details .fa-list {
position: relative;
top: 1px;
}
.shop-col-item .btns p {
font-size: 11px;
line-height: 20px;
margin-bottom: 0;
margin-top: 10px;
}
.shop-col-item .btns p i {
font-size: 14px;
margin-right: 5px;
}
答案 0 :(得分：2)
您需要在css：.carousel-inner>.active { width: 100% }
原因是当旋转木马前进时，滑动项目有width: 100%，但由于某种原因，活动项目没有，这会产生这种差异。也许这是一个bootstrap bug，但我不确定。
调试有点棘手，但更改transition速度的值很有帮助:)）
这是工作小提琴：http://jsfiddle.net/bortao/YLdm8/
修改
在您的网站上进行测试我发现这会使项目变小。所以将css更改为：
.carousel-inner>.active, .carousel-inner>.next, .carousel-inner>.prev {
width: 102.5%!important;
}
答案 1 :(得分：2)
我有这个问题并修复了它。事实证明，我正在使用＆＃34; left＆＃34;和＆＃34;对＆＃34;我的网站中的类，这些类实际上是为Twitter Bootstrap保留的。所以，我的CSS说.left {这里的东西}实际上是在修改旋转木马。我只是将我的CSS更改为具有不同的名称，而不是使用＆＃34; left＆＃34;和＆＃34;对＆＃34;我用了＃34; float-left＆＃34;和＆＃34; float-right＆＃34;，这就解决了。
答案 2 :(得分：0)
在我的情况下，它在margin-top: 0px;的CSS中设置了正确的.carousel .item。您可能需要调整此设置并观察其效果并进行相应设置。