Comment puis-je centrer Twitter-Bootstrap 3 liens navbar?

Comment puis-je centre les boutons dans le jsFiddle j'ai mis en place de sorte que les boutons sont de la même longueur et centré à l'intérieur et à travers la barre de navigation?

http://jsfiddle.net/3GQyq/3/

J'ai essayé différentes méthodes telles que

display:inline-block;margin:0 auto; text-align:center;

Mais je ne peux pas le faire fonctionner.

Si vous pouviez donner un peu d'explications au lieu de simplement la fixation de la CSS comme je veux apprendre donc je n'ai pas à revenir ici.

EDIT:

Comment puis-je centrer Twitter-Bootstrap 3 liens navbar?
Juste comme la façon dont ils sont centrés ici ^.

source d'informationauteur ProEvilz

  1. 14

    Bootstrap 3 a un nav-justified classe qui peut être utilisé sur nav. Pas de supplément CSS requis:

    <div class="container">
  <h3 class="text-muted">Project name</h3>
  <ul class="nav nav-justified">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Downloads</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

    Démo: http://bootply.com/72519

    Sur la base des commentaires, pour avoir la pleine-largeur centrée sur les liens à l'aide de la navbar-nav classe, l'utilisation flexbox...

    .navbar-center {
    width:100%;
    display: flex;
}
.navbar-center>li {
    flex:1 1 auto;
}

<div class="navbar navbar-default">
    <div class="container">
        <ul class="nav navbar-nav navbar-center text-center">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">More</a></li>
            <li><a href="#">Options</a></li>
        </ul>
    </div>
</div>

    https://www.codeply.com/go/6ZE3obnpuP

    Voir aussi

    Bootstrap barre de navigation à gauche, centré ou aligné à droite des éléments

    Centre de barre de navigation dans le Bootstrap

  2. 3

    Ajouter le style 

    .nav{
    text-align: center;
}

    Cela permettra de centrer le texte dans li.

    Vérifier Violon

    Ces styles devrait être suffisant. Vous étiez en train d'appliquer des styles à un mauvais élément.

    //This is being applied by the bootstrap
//Set it to 25px instead of the default 15px
.navbar{
    padding : 0 25px;
}

//Gave a width of 110px for each li
//as the container is following a fixed width format
li{
    width:110px;
}