Personnaliser carrousel avec bootstrap 3

Je suis en train de personnaliser le carrousel de ce modèle http://startbootstrap.com/templates/modern-business/
J'ai besoin d'insérer le carrousel à l'intérieur de la norme de bootstrap 3 classe de conteneur:

.container {
 padding-right: 15px;
 padding-left: 15px;
 margin-right: auto;
 margin-left: auto;
}

Le problème est que si je entrer dans le carrousel à l'intérieur de cette classe, il disparaît, ne peut pas voir quoi que ce soit...

C'est le code du carrousel:

<div 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">
        <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>
        <div class="carousel-caption">
          <h1>Modern Business - A Bootstrap 3 Template</h1>
        </div>
      </div>
      <div class="item">
        <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div>
        <div class="carousel-caption">
          <h1>Ready to Style &amp; Add Content</h1>
        </div>
      </div>
      <div class="item">
        <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>
        <div class="carousel-caption">
          <h1>Additional Layout Options at <a href="http://startbootstrap.com">http://startbootstrap.com</a></h1>
        </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>
</div>

Comment puis-je résoudre ce problème? Grâce

OriginalL'auteur Ogum | 2013-10-23

  1. 3

    Si vous inspectez le modèle, vous verrez que CSS personnalisé est défini dans:

    http://startbootstrap.com/templates/modern-business/css/modern-business.css

    Certains de ces styles faire du carrousel et plusieurs autres contenants de 100% de la hauteur et la largeur. Vous pouvez ajouter un peu de CSS remplace pour atteindre le même effet:

    html,body {
  height:100%;
}

.carousel-inner,.carousel,.item,.container,.fill {
  height:100%;
  width:100%;
}

    Démo: http://www.bootply.com/89646

    OriginalL'auteur Zim