Bootstrap Twitter-pleine largeur navbar

il suffit de changer la classe container en container-fullwidth comme ceci:

<div class="container-fullwidth">

vous ne savez Pas si le navbar-static-top class était disponible avant la version 2.2.2 mais je pense que vous pouvez atteindre votre objectif avec ce qui suit:

<div class="navbar navbar-static-top">
    <div class="navbar-inner">
        <ul class="nav">
            <li class="active"><a href="#">Test1</a></li>
            <li><a href="#">Test2</a></li>
            <li><a href="#">Test3</a></li>
            <li><a href="#">Test4</a></li>
            <li><a href="#">Test5</a></li>
        </ul>
    </div>
</div>
<div class="container">
    ...
</div>

j'ai mis en place un jsFiddle comme exemple.

sortez le navbar de votre container:

<div class="navbar">
    <div class="navbar-inner">
               <!-- nav bar items here -->
     </div>
</div>
<div class="container">

</div>

EDIT:

En voici un que j'ai fait avec responsive navbar. Le code correspond au corps du document:

    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
        <div class="container">

          <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          </a>

          <!-- Be sure to leave the brand out there if you want it shown -->
          <a class="brand" href="#">Project name</a>


          <!-- Everything you want hidden at 940px or less, place within here -->
          <div class="nav-collapse">
          <!-- .nav, .navbar-search, .navbar-form, etc -->
          <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li class="divider-vertical"></li>
              <li><a href="#">Link</a></li>
              <li class="divider-vertical"></li>
              <li><a href="#">Link</a></li>
            </ul>
          <ul class="nav pull-right">
            <li><a href="#">Log out</a></li>
          </ul>
          </div>

          </div>
        </div>

    </div>
  <div class="container">
    <div class="row">
      <div class="span12">

      </div>
    </div>


  </div> <!-- end container -->
  <script type="text/javascript" src="/assets/js/jquery-1.8.2.min.js"></script>
  <script type="text/javascript" src="/assets/js/bootstrap.min.js"></script>

je suis très en retard à la partie, mais cette réponse tire vers le haut dans les résultats de recherche Google.

Bootstrap 3 a une réponse pour ce Construit dans, mettez votre div de conteneur dans votre navbar à container-fluid et il va tomber à la largeur de l'écran.

Comme ceci:

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="/">More Stuff</a></li>
      </ul>
    </div>
  </div>
</div>

vous devez pousser le container vers le bas de la barre de navigation.

s'il vous Plaît trouver mon travail violon ici http://jsfiddle.net/meetravi/aXCMW/1/

<header>

    <h2 class="title">Test</h2>
</header>
<div class="navbar">
    <div class="navbar-inner">
        <ul class="nav">
            <li class="active"><a href="#">Test1</a></li>
            <li><a href="#">Test2</a></li>
            <li><a href="#">Test3</a></li>
            <li><a href="#">Test4</a></li>
            <li><a href="#">Test5</a></li>

        </ul>
    </div>
</div>
<div class="container">

</div>

il suffit de remplacer <div class="container"><div class="container-fluid">, qui est le conteneur, sans marges sur les deux côtés.

je pense que c'est la meilleure solution parce qu'elle évite quelques dépassements inutiles et fait usage de classes intégrées, c'est propre.

vous pouvez outrepasser certains css

body {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.navbar-inner {
    border-radius: 0px !important;
}

!important est nécessaire juste au cas où vous liez le bootstrap.css après votre css personnalisé.

Et ajouter votre nav html d'un .container

pour supprimer le bord-rayon sur les coins ajouter ce style à votre coutume.fichier css

    .navbar-inner{
       -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;
    }

je sais que je suis un peu en retard à la fête, mais j'ai pu contourner le problème en modifiant le CSS pour avoir la largeur de la durée de 100% et réglage de l/r marges 0px;

#div_id
{
    margin-left: 0px;
    margin-right: 0px;
    width: 100%;
}

vous devez ajouter col-md-12 à votre navbar interne. md est pour bureau .vous pouvez choisir d'autres options dans la liste d'options de bootstrap . 12 col-md-12 est de largeur .Si vous voulez une demi-largeur, vous pouvez utiliser 6 au lieu de 12 .par exemple col-md-6.

Voici la solution à votre question

    <div class="container">
       <div class="navbar">
          <div class="navbar-inner col-md-12">
               <!-- nav bar items here -->
          </div>
       </div>
   </div>