web-dev-qa-db-fra.com

Twitter Bootstrap - barre de navigation pleine largeur

Suivant l'exemple de la tuberculose, j'ai une barre de navigation qui est marquée comme suit:

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

J'aimerais que cela couvre toute la largeur de l'écran et ne présente pas de coins arrondis - un style similaire à celui du haut statique de la barre de navigation.

Je n'arrive pas à trouver comment faire cela dans la tuberculose. S'il n'y avait pas moyen, quel CSS aurais-je besoin de remplacer TB et de ne pas casser la réactivité?

csstwitter-bootstrapnavbar
24
StackOverflowNewbie

Modifiez simplement le conteneur de classe en conteneur-fullwidth comme ceci:

<div class="container-fullwidth">
32
Arnaud Bouchot

Pas sûr que la classe navbar-static-top soit disponible avant la version 2.2.2 mais je pense que vous pouvez atteindre votre objectif avec les éléments suivants:

<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>

Je mets ensemble un jsFiddle à titre d'exemple .

26
ahsteele

Mettez la barre de navigation hors de votre conteneur:

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

</div>

MODIFIER: 

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>
15
RRikesh

Je suis très en retard pour la fête, mais cette réponse arrive en tête des résultats de recherche Google.

Bootstrap 3 a une réponse pour cela intégrée, définissez votre conteneur div dans votre barre de navigation sur container-fluid et il tombera à la largeur de l'écran.

Ainsi:

<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>
12
Chris

Il suffit de remplacer <div class="container"> par <div class="container-fluid">, le conteneur sans marges des deux côtés.

Je pense que c'est la meilleure solution car elle évite certaines surcharges inutiles et utilise des classes intégrées, c'est propre.

1
stack_overflower

Vous devez pousser le conteneur sur la barre de navigation. 

Veuillez trouver mon violon de travail 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>
1
Ravi

Vous devez ajouter col-md-12 à votre barre de navigation intérieure. md est pour le bureau. vous pouvez choisir d’autres options dans la liste d’options de bootstrap. 12 en col-md-12 est pour la pleine largeur. Si vous voulez une demi-largeur, vous pouvez utiliser 6 au lieu de 12 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>
0
sanjay mundhra

Mettez votre <nav>element hors du <div class='container-fluid'>. Ex: -

<nav>
 ......nav content goes here
<nav>

<div class="container-fluid">
  <div>
   ........ other content goes here
  </div>
</div>

0
Gayathra Nakandala

Vous pouvez remplacer certains CSS

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

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

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

Et ajoutez votre nav html sur un .container

0
silviomoreto

Pour supprimer la bordure-rayon sur les coins, ajoutez ce style à votre fichier custom.css. 

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

Je sais que je suis un peu en retard pour la fête, mais j'ai contourné le problème en peaufinant le CSS pour qu'il ait une largeur de 100% et en fixant les marges l/r à 0px; 

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