引导程序 3 |旋转木马不会滑动

Question

我尝试使用 bootstrap 3 创建轮播 .. 但它并不是 bootstrap 的初学者我尽力了 ^^' .. 我不太确定我的代码是否有问题，但我认为问题是 bootstrap 3 不稳定？如果您有任何建议，请告诉我^_^ 这是我的codepen

<div class="container">
<div class="col-xs-12">
     <h1>Bootstrap 3 Thumbnail Slider</h1>

    <div class="well">
        <div id="myCarousel1" class="carousel slide">
            <!-- Carousel items -->
            <div class="carousel-inner">
                <div class="item active">
                    <div class="row">
                        <div class="col-xs-3"><a href="http://www.jquery2dotnet.com/"><img src="https://fr.techtribune.net/wp-content/uploads/2021/01/boruto-chapter-55.jpg" alt="Image" class="img-responsive"></a>

                        </div>
                        <div class="col-xs-3"><a href="http://www.jquery2dotnet.com/"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a>

                        </div>
                        <div class="col-xs-3"><a href="http://www.jquery2dotnet.com/"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a>

                        </div>
                        <div class="col-xs-3"><a href="http://www.jquery2dotnet.com/"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a>

                        </div>
                    </div>
                    <!--/row-->
                </div>
                <!--/item-->
                <div class="item">
                    <div class="row">
                        <div class="col-xs-3"><a href="http://www.jquery2dotnet.com/"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a>

                        </div>
                        <div class="col-xs-3"><a href="http://www.jquery2dotnet.com/"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a>

                        </div>
                        <div class="col-xs-3"><a href="http://www.jquery2dotnet.com/"><img src="https://fr.techtribune.net/wp-content/uploads/2021/01/boruto-chapter-55.jpg" alt="Image" class="img-responsive"></a>

                        </div>
                        <div class="col-xs-3"><a href="http://www.jquery2dotnet.com/"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a>

                        </div>
                    </div>
                    <!--/row-->
                </div>
                <!--/item-->
                <div class="item">
                    <div class="row">
                        <div class="col-xs-3"><a href="http://www.jquery2dotnet.com/"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a>

                        </div>
                        <div class="col-xs-3"><a href="http://www.jquery2dotnet.com/"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a>

                        </div>
                        <div class="col-xs-3"><a href="http://www.jquery2dotnet.com/"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive"></a>

                        </div>
                        <div class="col-xs-3"><a href="http://www.jquery2dotnet.com/"><img src=https://fr.techtribune.net/wp-content/uploads/2021/01/boruto-chapter-55.jpg" alt="Image" class="img-responsive"></a>

                        </div>
                    </div>
                    <!--/row-->
                </div>
                <!--/item-->
            </div>
            <!--/carousel-inner--> <a class="left carousel-control" href="#myCarousel1" data-slide="prev">‹</a>

›

        </div>
        <!--/myCarousel-->
    </div>
    <!--/well-->
</div>