引導程序滑塊在容器中不起作用

Question

我有一個引導程序滑塊，如果將其放在容器外，對我來說效果很好，但是如果我將其放在容器內，則無法工作，請幫幫我，這是我的容器代碼：

<div class="container">

<div class="row">
<div class="col-md-12"
    <!-- Full Page Image Background Carousel Header -->
    <header id="myCarousel" class="carousel slide">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for Slides -->
        <div class="carousel-inner">
            <div class="item active">
                <!-- Set the first background image using inline CSS below. -->
                <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>
                <div class="carousel-caption">
                    <h2>Caption 1</h2>
                </div>
            </div>
            <div class="item">
                <!-- Set the second background image using inline CSS below. -->
                <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div>
                <div class="carousel-caption">
                    <h2>Caption 2</h2>
                </div>
            </div>
            <div class="item">
                <!-- Set the third background image using inline CSS below. -->
                <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>
                <div class="carousel-caption">
                    <h2>Caption 3</h2>
                </div>
            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="icon-prev"></span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="icon-next"></span>
        </a>

    </header>
  </div>
</div>
</div>
 <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Script to Activate the Carousel -->
    <script>
     $('.#myCarousel').carousel({
        interval: 4000
    })

</script>

但是，如果我刪除container，row，col-md-12 divs就可以了。 我的代碼有什么問題？

問候

Answer 1

語法錯誤，我們不能同時使用id或類選擇器（。＃​​）

正確的代碼是

  $('#myCarousel').carousel({
        interval: 4000
})

在第三行，您沒有關閉div end（>）像

<div class="col-md-12">

Answer 2

您的代碼中有幾個錯誤（可能只是在復制到SO時出錯）。

您在第3行上缺少一個>

<div class="col-md-12">

在您的腳本中還具有： $('.#myCarousel').carousel({

刪除圓點作為您要查找的$('#myCarousel').carousel({這應該是$('#myCarousel').carousel({

最后，將div更改為<img>標簽

例如<img src="http://placehold.it/1900x1080&text=Slide One" alt="">

這是一個工作示例： https : //jsfiddle.net/cw9s99o9/1/