web-dev-qa-db-fra.com

Comment justifier navbar-nav dans Bootstrap 3

Je tente de justifier un navbar (étire le contenu de la barre de navigation) dans Bootstrap 3. J'ai ajouté margin: 0 auto; max-width: 1000px; à la nav* classes, et a également tenté d’ajouter un élément container en tant que parent à ul. En guise de dernier contrôle, j’ai fait ce qui était suggéré dans cette réponse en ajoutant navbar-justified à la classe navbar, mais cela a tout fait plisser à gauche sans justifier toute la barre de navigation.

Faire un nav nav-justifiedul place le ul au centre, mais il ne conserve pas les styles du navbar-nav La classe _ étant donné que cela ne fait pas partie de la ul et que son apparence n’est pas géniale lorsque l’écran est inférieur à 768 pixels.

Comment justifier un Bootstrap 3 navbar?

Edit: Pour ceux qui sont intéressés par une réponse plus complète, voici du code que j'utilise en production:

// Stylesheet
.navbar-nav>li {
  float: none;
}

// Navbar
<nav class="navbar navbar-default">
  <ul class="nav nav-justified navbar-nav">
    <li><a href="/">Home</a></li>
    <li><a href="group.html">Group</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="positions.html">Positions</a></li>
  </ul>
</nav>

Et voici un jsFiddle qui marche . Vous devrez peut-être étirer la taille de la boîte result pour qu'elle s'affiche correctement. Si vous souhaitez centrer la liste actuelle sans que le nav ne s'étende sur toute la largeur, voir jsFiddle de David Taiaroa .

twitter-bootstraptwitter-bootstrap-3navbar
47
josh

Il s'avère qu'il y a un float: left propriété par défaut sur tous les navbar-nav>li éléments, c’est pourquoi ils se sont tous plissés vers la gauche. Une fois que j'ai ajouté le code ci-dessous, cela a rendu le navbar à la fois centré et non plissé.

.navbar-nav>li {
        float: none;
}

J'espère que cela aidera quelqu'un d'autre qui cherche à centrer un navbar.

9
josh

Vous pouvez justifier le contenu de la barre de navigation en utilisant:

@media (min-width: 768px){
  .navbar-nav{
     margin: 0 auto;
     display: table;
     table-layout: fixed;
     float: none;
  }
}

Voir ce live: http://jsfiddle.net/panchroma/2fntE/

Bonne chance!

65
David Taiaroa

Pour justifier le menu bootstrap 3 navbar-nav justifier le menu à 100% largeur), vous pouvez utiliser ce code:

@media (min-width: 768px){
    .navbar-nav {
        margin: 0 auto;
        display: table;
        table-layout: auto;
        float: none;
        width: 100%;
    }
    .navbar-nav>li {
        display: table-cell;
        float: none;
        text-align: center;
    }
}
36
Nico

Voici une solution plus simple. supprimez simplement la classe "navbar-nav" et ajoutez "justification-nav".

4
Nishanth
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
 <div class="container">
<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>
</div>
<div class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
    <li><a href="#">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>  
  </ul>
</div>

et pour le css

@media ( min-width: 768px ) { 
    .navbar > .container {
        text-align: center;
    }
    .navbar-header,.navbar-brand,.navbar .navbar-nav,.navbar .navbar-nav > li {
        float: none;
        display: inline-block;
    }
    .collapse.navbar-collapse {
        width: auto;
        clear: none;
    }
}

voir en direct http://www.bootply.com/103172

1
Lynnais

Je sais que c'est un ancien post, mais j'aimerais partager ma solution. J'ai passé plusieurs heures à essayer de créer un menu de navigation justifié. Vous n'avez pas vraiment besoin de modifier quoi que ce soit dans bootstrap css. Il vous suffit d'ajouter la classe correcte dans le code HTML.

   <nav class="nav navbar-default navbar-fixed-top">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-1" aria-expanded="false">
                <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" href="#top">Brand Name</a>
        </div>
        <div class="collapse navbar-collapse" id="collapsable-1">
            <ul class="nav nav-justified">
                <li><a href="#about-me">About Me</a></li>
                <li><a href="#skills">Skills</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact-me">Contact Me</a></li>
            </ul>
        </div>
    </nav>

Ce code CSS supprime simplement la classe de la marque navbar lorsque l'écran atteint 768 pixels.

media@(min-width: 768px){
   .navbar-brand{
        display: none;
    }
}
0
user7558471

Salut, vous pouvez utiliser ce code ci-dessous pour travailler justifié nav

<div class="navbar navbar-inverse">
    <ul class="navbar-nav nav nav-justified">
        <li class="active"><a href="#">Inicio</a></li>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
    </ul>
 </div>
0
Kagiso Nyokolodi