10
votes

Centre non ordonné List NAVBAR - BOOTSTRAP 3

Ainsi, je tente de centrer mes articles de liste NAV-bar. Comme il n'y a pas de fonction utilitaire pour cette tâche, j'ai conçu le code suivant qui place la liste non ordonnée dans une colonne d'une ligne. Mais la liste est toujours justifiée à gauche, même après avoir essayé de centrer avec l'ancien "Text-Align: Centre"

<div class="navbar navbar-fixed-top ">
    <!--<a class="navbar-brand" href="#">Title</a> -->
    <div class= "row">
        <div style="border:1px solid black;text-align:center;" class="col-4 col-offset-4">
            <ul class="nav navbar-nav">
                <li class="active"><a href="/">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</div>

twitter-bootstrap twitter-bootstrap-3

0 commentaires

3 Réponses :

2
votes

Voici le code que j'ai fait hier, fonctionne bien avec bootstrap 3 RC1 forte>. J'espère que cela vous aidera.

                <nav class="navbar navbar-fixed-top">                
                        <div class="container">                          
                            <a href="#" class="navbar-brand">Title</a>
                            <ul class="nav navbar-nav">
                                <li class="active"><a href="#" >Home</a></li>
                                <li><a href="#" >Services</a></li>
                            </ul>                                                                          
                        </div>                
                </nav>

1 commentaires

Ceci est plus propre, mais le même problème existe toujours. Les éléments de la liste sont justifiés à gauche dans le conteneur. J'aimerais qu'ils soient centrés

3
votes

J'ai pu comprendre cela seul. Je ne sais pas si c'était la meilleure solution: xxx

J'ai ajouté les styles suivants à bootstrap.css: xxx

1 commentaires

Firefox semble ajouter une barre de défilement horizontale avec cette solution (en raison de la droite : 50% règle).


                        
                                            
                            
                                
                                    23
 votes
                                
                            
                            
                                
                                     Étapes que j'ai prises: 

 Supprimer  float: gauche  code> dans les éléments de la liste et de la liste  li>
 Utilisez  Affichage: Inline  code> au lieu des éléments de liste  li>
 Définir des liens vers  Affichage: Inline-Block  CODE> Ils gardent donc leurs dimensions de bloc  li>
 ajout simplement  text-align: Centre  Code> dans la barre NAV pour centrer tout  LI>
 Enveloppe dans la requête de média afin que la liste verticale sur mobile n'est pas affectée  LI>
 ul>  CSS résultant Ajout d'un  .navbar-centré  code> style:  p>  xxx  pré> 
 Utilisez en appliquant  .navbar centré sur " / Code> Style à Navar:  P> 
<div class="navbar navbar-default navbar-centered" role="navigation">
    ...
</div>

                                

                                                                    
                                    
                                    
                                        2 commentaires
                                        
                                                                                            
                                                    Pauses lors du croisement de petit en milieu. Sinon, cela fonctionnait à merveille.                                                
                                                
                                                                                            
                                                    Cela a probablement quelque chose à voir avec mon aussi à l'aide d'une image à l'intérieur de la barre Naville. Quand je trouve le correctif, je vais le mettre en place. merci pour vérifier @deizel