Bootstrap 3: Comment faire un centré barre de navigation

J'ai vu quelques hacks pour Bootstrap <=2 mais je suis en utilisant v3 et je veux faire une ligne horizontale de liens qui sont centrés à l'intérieur de la ligne/conteneur. Voici mon balisage:

<div class="footer row">    
    <div class="col-12">                
        <ul id="menu-main" class="nav navbar-nav">
            <li class="text-center">
                <%= link_to "Home", root_path  %>
            </li>
            <li class="text-center">
                <%= link_to "About", root_path  %>          
            </li>
            <li class="text-center">
                <%= link_to "Help", root_path  %>           
            </li>
        </ul>
    </div>  
</div>
Avez-vous vu de la documentation dans le cadre du Système de Grille > Colonnes de Nidification getbootstrap.com/css
Découvrez le bootstrap 3 exemples. Cela ressemble à ce que vous cherchez.
Justifiée nav est cool, mais je ne veux pas fan sur les liens sur la page. Je n'ai que quelques donc, je veux juste center avec un espacement normal.
découvrez mon site perso. Est la barre de navigation de ce que vous recherchez? Si oui, n'hésitez pas à voler le code. Il a été créé à l'aide de Bootstrap 3.
Yup. C'est l'idée. Cependant, j'aimerais avoir la possibilité de s'effondrer en lignes verticales sur les petits écrans. Le vôtre n'est qu'à trois si vous n'en avez pas besoin, mais le mien sera probablement.

OriginalL'auteur emersonthis | 2013-08-30

  1. 67

    Cela devrait être exactement ce que vous cherchez.

    Voici un jsFiddle Démo

    Si vous voulez que ce fixe de pied de page, il suffit d'ajouter navbar-fixed-bottom classe à la <nav class="navbar navbar-default" role="navigation"> élément.

    HTML

    <nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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  navbar-ex1-collapse">
      <ul class="nav navbar-nav">
         <li class="active"><a href="#">Link</a></li>
         <li><a href="#">Link</a></li>
         <li><a href="#">Link</a></li>
      </ul>
  </div>
</nav>

    CSS

    @media (min-width: 768px){
    .navbar-nav{
        float:none;
        margin: 0 auto;
        display: table;
        table-layout: fixed;
    }
}
    cela fonctionne pour moi, sauf dans IE 8
    Êtes-vous à l'aide de Respond.js? il est nécessaire pour les demandes des médias en IE8 et IE9 Voir le Bootstrap prise en charge du Navigateur Docs pour plus d'infos sur cette.
    quelle est la mise en page fixe? il fonctionne pour moi aussi, sans que
    fixe n'est pas obligatoire, il permet seulement le navigateur générer la table un peu plus rapide.

    OriginalL'auteur Schmalzy

  2. 1

    Similaire à @Adam suggestion, je vois que cela fonctionne:

        <div class="footer row">    

            <ul id="menu-main" class="list-inline text-center">
                <li class="text-center">
                    <%= link_to "Home", root_path  %>
                </li>
                <li class="text-center">
                    <%= link_to "About", root_path  %>          
                </li>
                <li class="text-center">
                    <%= link_to "Help", root_path  %>           
                </li>
                <li class="text-center">
                    <%= mail_to "[email protected]", "Contact"   %>
                </li>
            </ul>
    </div>

    Cependant, il ne s'effondre pas sur les petites largeurs comme une barre de navigation. Il serait bon de maintenir cette fonctionnalité, si quelqu'un sait comment.

    J'ai édité ma réponse.

    OriginalL'auteur emersonthis