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>

 

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

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