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>

 

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

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