bootstrap轮播，播放到最后一张图片的时候，就不正确了。

问题：

　　使用bootstrap的轮播做图片幻灯片，发现轮播到最后一张的时候，显示不正常了。

原因：

　　在写carousel-indicators的class的时候，写错了。下面代码块中的红色是正确的写法，在此之前我错把class="active"写成class="active item"；把class=""错写成class="item"。

<div id='MySlide' class='carousel slide' data-ride="carousel">
<ol class='carousel-indicators'>
<li data-target="#MySlide" data-slide-to="0" class="active"/>
<li data-target="#MySlide" data-slide-to="1" class=""/>
<li data-target="#MySlide" data-slide-to="2" class=""/>
</ol>

<!-- Carousel items -->
<div class='carousel-inner'>
<div class='active item'>
<img src="./img/1.png" alt='slide 1' width='480' height='320'/>
<div class="carousel-caption">
<h3>第一张幻灯片的标题</h3>
<p>它的说明文字。。。</p>
</div>
</div>
<div class='item'>
<img src="./img/2.png" alt='slide 2' width='480' height='320'/>
<div class="carousel-caption">
<h3>第二张幻灯片的标题</h3>
<p>它的说明文字。。。</p>
</div>
</div>
<div class='item'>
<img src="./img/3.png" alt='slide 3' width='480' height='320'/>
<div class="carousel-caption">
<h3>第三张幻灯片的标题</h3>
<p>它的说明文字。。。</p>
</div>
</div>
</div>

<!-- Carousel nav -->
<a class='carousel-control left' href='#MySlide' data-slide='prev'><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class='carousel-control right' href='#MySlide' data-slide='next'><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>

显示到第三章图片（正常）：



再往后，就不正常了，只有两个箭头：