web-dev-qa-db-fra.com

Bootstrap Navbar overop Carousel

Avoir un léger problème avec le positionnement de ma barre de navigation. J'ai ma barre de navigation comme je le voudrais (légèrement détachée du haut, comme dans cet exemple: http://getbootstrap.com/examples/carousel/ ), mais les images de mon carrousel se terminent sous la barre de navigation.

J'aimerais que les images de mon carrousel s'étendent jusqu'en haut de la page et que la barre de navigation recouvre la partie supérieure du carrousel (comme dans l'exemple ci-dessus). J'ai joué avec le rembourrage, mais le plus haut des images du carrousel est le bas de la barre de navigation. J'ai joint les extraits de code pour le css ci-dessous de navbar, carrousel et carrousel. Toute aide serait appréciée, merci d'avance

Code pour la barre de navigation:

<div class="container">
  <div class="navbar navbar-inverse" role="navigation">  <!navbar-inverse is black, navbar-default is grey>


    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand">Derby Days 2014</a>
    </div>

    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Donate</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Events <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Penny Wars</a></li>
            <li><a href="#">Wonderful Wednesday</a></li>
            <li><a href="#">Lip Sync</a></li>
            <li><a href="#">Concert</a></li>
          </ul>
        </li>
        <li><a href="#">FAQ</a></li>
      </ul>
    </div><!--/.nav-collapse -->
   </div>
</div>

Code pour le carrousel:

</ li> </ li> </ li>

Code CSS pour carrousel:

.carousel {position: relative;}

.carousel-inner {position: relative; width: 100%; overflow: hidden;}
twitter-bootstraptwitter-bootstrap-3carouselnavbar
6
Caleb Addington

Je crois que c'est ce que vous essayez de réaliser?

Js Fiddle

.bannerContainer {
    position:relative;     
}
.carousel {
    position:absolute;
    top:0;    
}
.navbar {
    position:absolute;
    top:30px;
    z-index:10;
    background:#fff;
    width:100%;
}

Vous voulez inclure des divs positionnés (nav et carrousel) dans un div qui est relatif. 

9
Jamie Collingwood

Vous pouvez remplacer le css de bootstrap existant avec ceci, vous pouvez utiliser position: fixed ou position: absolute 

.navbar{
      position:absolute;
      width:100%;
      z-index:10;
      max-width:100%;
}

Voici un exemple de code fonctionnel

4
Nikhil Raj A

// Pour que la barre de navigation s'assied sur le carrousel.

.navbar {
position:absolute
}

// Centrer l'image et ajouter un peu de marge au-dessus pour compenser la barre de navigation.

.carousel-inner > .item > img {
    margin: 0 auto;
    padding-top: 50px;
}

Travaillé pour moi à tout le moins, alors voici en espérant que cela vous aide (et aide les autres). À votre santé.

2
Some Guy

voici ce qui a fonctionné pour moi:

  1. Mettez le carrousel dans une section et rendez-le absolu 

  2. Rendre la barre de navigation absolue aussi

         <section id="home">
          <div id="carouselExampleIndicators" class="carousel slide" data- 
          ride="carousel">....
    </section>
     //the navbar
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top  mynav" >... 
    </nav>

//////// CSS

.mynav{
    position: absolute;
  }
.home{
    position: absolute;
}
0
Eljeddi Oussema

Sur l'exemple lié, ils ont utilisé un wrapper en dehors de la nav .navbar-wrapper avec un placement absolu et une marge supérieure de 20px (lorsque la largeur de la fenêtre d'affichage est supérieure à 768px).

Voici le code qu'ils ont utilisé pour le faire fonctionner:

.navbar-wrapper {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   z-index: 20;
}

.navbar-wrapper .container {
   padding-left: 0;
   padding-right: 0;
}

.navbar-wrapper .navbar {
   padding-left: 15px;
   padding-right: 15px;
}

@media (min-width: 768px) {
  .navbar-wrapper {
    margin-top: 20px;
  }
}
0
denoise