bootstrap slider не работает в контейнере

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> 

но если я удалить контейнер, строку, столбец-й мкр-12 дивы стало хорошо. В чем проблема в моем коде?

С уважением

Answer 1

У вас есть пара ошибок в вашем коде (возможно, только что сделанная при копировании на SO).

вам не хватает > на линии 3

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

также в сценарии у вас есть: $('.#myCarousel').carousel({

удалить точку как сво идентификатор, который вы ищете - это должно быть $('#myCarousel').carousel({

И, наконец, смените свои divs на <img> теги:

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

Heres Рабочий пример: https://jsfiddle.net/cw9s99o9/1/

Answer 2

синтаксис является неправильным мы не можем использовать идентификатор или селектор класса вместе (. #)

правильный код

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

и на линии не три ты не закрывал Див конец (>) написать письмо как

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