2016-12-22 23 views
0

Hallo möge nur wissen, warum Sie diesen Code mitBootstrap 3 navbar Zentrum

.navbar .navbar-nav { 
    display: inline-block; 
    float: none; 
} 
.navbar .navbar-collapse { 
    text-align: center; 
} 

der seinen Elementen navbar Zentrum macht, anstatt, einen neuen CSS-Style-wie-

.navbarAlign { 
    display: inline-block; 
    float: none; 
    text-align: center; 
} 

und in die Umsetzung nav Elemente Klassen

</div> 
    <nav class="navbar navbar-inverse -----> navbarAlign"> <----- 
     <div class="container-fluid"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-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="https://www.google.com" target="blank">VirusFun</a> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1 "> 
      <ul class="nav navbar-nav"> 
      <li></li> 
      </ul> 
      <ul class="nav navbar-nav navbar-center"> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
.......... 
+0

Was genau ist die Frage, weil Ihre beiden CSS Beispiele sind wahrscheinlich nicht die gleichen produzieren Ergebnisse, wenn Sie behaupten, dass sie das Gleiche tun. Bitte poste ein ** minimales funktionierendes Beispiel ** deines Codes (HTML/CSS/JS) in einem [Snippet] (https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and- HTML-Code-Schnipsel /). Siehe [mcve] und [fragen]. – vanburen

+0

Bitte erläutern Sie das Problem, geben Sie zumindest einige Beispielcode .. –

Antwort

1

wenn Sie die richtige Antwort zu bekommen wäre es besser, wenn man es klar fragen, aber wenn Sie den Inhalt in der nav zentralisieren möchten Sie verwenden sollten:

.navbar { 
    text-align: center; 
} 

Da die navbar die Eltern ist und was auch immer Ausrichtung Sie definieren im Inneren auf alle Elemente beeinflussen.

Aber wenn Sie die navbar sich in der Webseite zentralisieren:

.navbar { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

Hoffentlich hilft es Ihnen :)