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>

但如果我删除容器，行，col-md-12 divs就变得很好了。我的代码中的问题是什么？

此致

Answer 1

语法错误我们不能一起使用id或类选择器（。＃）

正确的代码是

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

并且在第3行，你没有关闭div结束（＆gt;）写得像

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

Answer 2

您的代码中有几个错误（可能只是在复制到SO时才会出现）。你错过了一个＆gt;在第3行＆lt; div class =“col-md-12”＆gt; 你的脚本中也有：$（'。＃myCarousel'）。carousel（{ 删除点作为你正在寻找的id - 这应该是$（'＃myCarousel'）。carousel（{ 最后，将您的div更改为＆lt; img＆gt;标签例如＆lt; img src =“http://placehold.it/1900x1080&text=Slide One”alt =“”＆gt; 下面是一个有效的例子：https：//jsfiddle.net/cw9s99o9/1/

引导滑块不在容器中工作

2 个答案: