Bootstrap 3 - Fixe Sensible barre de navigation dans un conteneur (sans couleur de fond sur les côtés)

Corriger le défaut barre de navigation à partir de: http://getbootstrap.com/examples/navbar/

enrouler la barre de navigation en son propre .div conteneur et envelopper cette div dans une div à vous de les corriger:

#fixme {position: fixed;left: 0;right: 0; top:0;}
/* prevent overlap */
body{padding-top:70px;}

html

<div id="fixme">        
    <div class="container">
         <!-- your navbar here -->
    </div>
</div>

Autre exemple Une façon de le faire (il y en aura beaucoup d'autres). Prendre statique de la navbar exemple: http://getbootstrap.com/examples/navbar-fixed-top/

La barre de navigation de code contient déjà une div avec la classe conteneur qui encapsule la barre de navigation de contenu et de définir la largeur de la grilles différentes (si le contenu est sensible) déjà.

Le 100% de la largeur "effet" est défini par une couleur d'arrière-plan (et des frontières) de l' .navbar-classe par défaut (set 100% de la largeur et de la .navbar-fixed-en haut à gauche: droite et de 0).

Supprimer cet arrière-plan et bordure:

.navbar-default {
    background-color:transparent;
    border: none;
}

Après cela, la barre de navigation de soi n'ont pas de couleur d'arrière-plan. Pour résoudre l'enveloppe de votre barre de navigation à l'intérieur d'un extra-div (à l'intérieur de l' .containter div) et appliquer une couleur d'arrière-plan:

.navbar > .container > div
{
  background-color: pink;

}

Lorsque vous appliquez ce fond sur la .récipient sans le div de votre fond de plan: 15px plus large alors votre contenu sur les deux côtés en raison de la gouttière de l'grilles (rembourrage).

Exemple: http://bootply.com/79742

html:

 <div class="navbar navbar-default navbar-fixed-top">
      <div class="container">
          <div>
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="../navbar/">Default</a></li>
            <li><a href="../navbar-static-top/">Static top</a></li>
            <li class="active"><a href="./">Fixed top</a></li>
          </ul>
        </div><!--/.nav-collapse -->
        </div>
        </div>
    </div>

OriginalL'auteur Bass Jobsen

J'ai été aux prises avec le même problème. Je l'ai résolu en ajoutant quelques jquery qui fait de la ".navbar" de la même largeur que l' ".conteneur".

$(document).ready(function () {
    var siteWidth = $('.container').width();
    $('.navbar').width(siteWidth);
});

OriginalL'auteur ab3d_work