Bootstrap carousel仅显示第一项.我在这里错过了什么？

Question

我正在将bootstrap轮播实现到我的页面中,但是我只能看到第一个项目(包含3个部分)而不是其他两个.

在bootply http://www.bootply.com/A465PmKBRm它正在工作,但不在我的网站上.用我正在使用的版本测试它.

我在这里错过了什么？

<div class="row">

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

                  <!-- Wrapper for slides -->
                  <div class="carousel-inner">
                    <div class="item active">
                                    <!-- SINGLE SERVICE -->
                                    <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
                                        <!-- SERVICE HEADING -->
                                        <h3>text</h3>
                                        <!-- SERVICE DESCRIPTION -->
                                        <p>description</p>
                                    </div>
                                    <!-- /END SINGLE SERVICE -->
                                    <!-- SINGLE SERVICE -->
                                    <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
                                        <!-- SERVICE HEADING -->
                                        <h3>text</h3>
                                        <!-- SERVICE DESCRIPTION -->
                                        <p>description</p>
                                    </div>
                                    <!-- /END SINGLE SERVICE -->
                                    <!-- SINGLE SERVICE -->
                                    <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
                                        <!-- SERVICE HEADING -->
                                        <h3>text</h3>
                                        <!-- SERVICE DESCRIPTION -->
                                        <p>description</p>
                                    </div>
                                    <!-- /END SINGLE SERVICE -->
                    </div>
                    <div class="item">
                                    <!-- SINGLE SERVICE -->
                                    <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
                                        <!-- SERVICE HEADING -->
                                        <h3>text</h3>
                                        <!-- SERVICE DESCRIPTION -->
                                        <p>description</p>
                                    </div>
                                    <!-- /END SINGLE SERVICE -->
                                    <!-- SINGLE SERVICE -->
                                    <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
                                        <!-- SERVICE HEADING -->
                                        <h3>text</h3>
                                        <!-- SERVICE DESCRIPTION -->
                                        <p>description</p>
                                    </div>
                                    <!-- /END SINGLE SERVICE -->
                                    <!-- SINGLE SERVICE -->
                                    <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
                                        <!-- SERVICE HEADING -->
                                        <h3>text</h3>
                                        <!-- SERVICE DESCRIPTION -->
                                        <p>description</p>
                                    </div>
                                    <!-- /END SINGLE SERVICE -->
                    </div>
                    <div class="item">
                                    <!-- SINGLE SERVICE -->
                                    <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
                                        <!-- SERVICE HEADING -->
                                        <h3>text</h3>
                                        <!-- SERVICE DESCRIPTION -->
                                        <p>description</p>
                                    </div>
                                    <!-- /END SINGLE SERVICE -->
                                    <!-- SINGLE SERVICE -->
                                    <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
                                        <!-- SERVICE HEADING -->
                                        <h3>text</h3>
                                        <!-- SERVICE DESCRIPTION -->
                                        <p>description</p>
                                    </div>
                                    <!-- /END SINGLE SERVICE -->
                                    <!-- SINGLE SERVICE -->
                                    <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
                                        <!-- SERVICE HEADING -->
                                        <h3>text</h3>
                                        <!-- SERVICE DESCRIPTION -->
                                        <p>description</p>
                                    </div>
                                    <!-- /END SINGLE SERVICE -->
                    </div>
                  </div>

                  <!-- Controls -->
                  <a class="left carousel-control" href="#carousel-content" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                  </a>
                  <a class="right carousel-control" href="#carousel-content" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                  </a>
                </div>

        </div>

Answer 1

正如R Lam在评论中所说,最可能的原因是你错过了bootstrap.js或者以某种方式禁用了你网站上的Javascript执行(例如,过于严格的CSP政策).检查控制台中是否生成了任何错误以及Javascript是否已打开.这可能是因为没有Javascript bootstrap.css文件将显示第一个轮播项目,但不允许切换到其他项目.