我正在使用bootstrap构建我的第一个站点。到目前为止情况还不错。
我唯一无法解决的问题是:
自举旋转木马滑到很远。我有3个旋转木马,每个有5张照片。
如果我反复按下后退按钮(不会发出多少次),旋转木马会循环使用3个项目没问题。
但如果我重复按下下一个按钮,则在第三次之后它不会重置为0.
导致这种情况的原因是什么?
<div class="row">
<div class="col-sm-12 thumb_box">
<div class="thumbs">
<div class="well">
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
</div>
<!--/row-->
</div>
<div class="item">
<div class="row">
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
</div>
<!--/row-->
</div>
<div class="item">
<div class="row thumb_row">
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
</div>
<!--/row-->
</div>
<!--/carousel-inner-->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>
<!--/myCarousel-->
</div>
<!--/well-->
</div>
答案 0 :(得分:0)
我发现了问题。 如果您遇到此问题,请检查您的div元素。 我的divs层次结构出了问题。