Bootstrap-Slider funktioniert nicht im Container

Question

Ich habe einen Bootstrap-Slider, Es funktioniert gut für mich, wenn ich es außerhalb meines Containers legte, aber wenn ich in einen Container legte es nicht funktioniert, Bitte helfen Sie mir, hier ist meine mit Container Code:

<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> 

aber wenn ich Behälter zu entfernen, row, col-md-12 divs wurde es in Ordnung. Was ist das Problem in meinem Code?

Grüße

Answer 1

Sie haben ein paar Fehler in Ihrem Code (vielleicht nur beim Kopieren nach SO).

Sie eine > auf Linie 3

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

auch in Ihrem Skript fehlt Sie haben: $('.#myCarousel').carousel({

den Punkt als eine ID entfernen Sie suchen - das $('#myCarousel').carousel({ sollte

Zuletzt, ändern Sie Ihre divs zu Tags

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

Hier ein Arbeitsbeispiel: https://jsfiddle.net/cw9s99o9/1/

Answer 2

Syntax falsch ist wir können nicht-ID oder Klasse-Selektor zusammen (. #)

richtigen Code ist

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

und an der Linie keine drei Sie nicht in der Nähe div Ende tat (>) schreiben wie

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