[ERLEDIGT] Bootstrap-Navbar zentrieren

[Automat_12]

Hi, also ich habe mich nochmal umorientiert und verwende jetzt Bootstrap. Mein Navigation hat eine ungefähre Struktur, wie die von w3 School...

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

QUELLE W3 School

Mich würde einfach mal interessieren, wie man die jetzt zentriert. Mit text-Align: center, habe ich nichts erreicht...

 

[SpiceLab]

Mich würde einfach mal interessieren, wie man die jetzt zentriert. Mit text-Align: center, habe ich nichts erreicht...

Wundert es Dich, wo doch <li> mit float:left|right ausgestattet ist?

Siehe hierzu die Online-Dokumentation:

• https://getbootstrap.com/components/#navbar-component-alignment
  
• http://holdirbootstrap.de/komponenten/#navbar-component-alignment

Wenn man das technische CSS-Verständnis besitzt, dass sich umfliessende Elemente nicht ohne weiteres zentrieren lassen, kurz gezielt googeln: https://www.google.de/search?q=centering+bootstrap+navbar

Et voilà: http://stackoverflow.com/questions/18777235/center-content-in-responsive-bootstrap-navbar

 

[Automat_12]

Ok, wenn ich das obere BSP einmal aufgreife:

.navbar navbar-inverse {
  display: inline-block;
  float: none;
  vertical-align: top;
}

.container-fluid {
  text-align: center;
}

Aber das scheint nicht zu funktionieren. Danke für weitere Unterstützung!

 

[SpiceLab]

Ok, wenn ich das obere BSP einmal aufgreife:

.navbar navbar-inverse {
  display: inline-block;
  float: none;
  vertical-align: top;
}

.container-fluid {
  text-align: center;
}

Aber das scheint nicht zu funktionieren.

Es würde mir ernsthaft zu denken geben, wo doch beide dort verlinkten Fiddle-Demos funktionieren!

• http://jsfiddle.net/bdd9U/2/
  
• http://jsfiddle.net/bdd9U/3/

Und die Ursache findest Du bei genauem Hinschauen direkt in Zeile 1, Spalte 9.

Wie Du das geschafft hast, beim Kopieren dieser 9 Zeilen ein einzelnes Zeichen daraus nicht mitzunehmen, würde mich dann schon interessieren.

 

[Automat_12]

Spicelab, ich kann dir gerade nicht folgen. Kannst du mir das anhand des Codes vom ersten Beitrag erklären?
Wäre sehr freundlich, danke!

 

[Tronjer]

Du musst deine Navbar in ein <div class="container"> einbetten. Dann steht sie auch mittig.

 

[Automat_12]

Ah okay
also um <nav class="navbar navbar-inverse"> einfach <div class="container"></div> ??

Ja stimmt das ist die Lösung!

Danke Tronjer!!!

 

[SpiceLab]

Spicelab, ich kann dir gerade nicht folgen. Kannst du mir das anhand des Codes vom ersten Beitrag erklären?
Wäre sehr freundlich, danke!

OK 2. Anlauf

Zähle hier im Originalcode bis Spalte 9, und du landest auf einem Punkt, der die Klasse navbar-nav auszeichnet:

.navbar .navbar-nav {

Und jetzt das Gleiche nochmal in Deiner Kopie:

.navbar navbar-inverse {

Das spezielle Syntax-Highlighting für CSS macht den Fehler/Unterschied auch farblich sichtbar

Wie gesagt:

die Ursache findest Du bei genauem Hinschauen direkt in Zeile 1, Spalte 9.

hätte da eigentlich als Wegweiser genügen sollen.

Wie Du das geschafft hast, beim Kopieren dieser 9 Zeilen ein einzelnes Zeichen daraus nicht mitzunehmen, würde mich dann schon interessieren.

Beim Überschreiben von .navbar-nav in navbar-inverse ohne vorangestellten Punkt

 

[Automat_12]

Ach das meintest du.

Der Code stammt hier her: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_inverse&stacked=h

da wurde das ohne Punkt gemacht ;-)

 

[Tronjer]

Im HTML steht es ohne Punkt, im CSS mit. Sonst wäre es nicht möglich, innerhalb Stylesheets Klassen von anderen Elementen zu unterscheiden.

 

[SpiceLab]

Habe ich Dich eventuell mißverstanden, was die Zentrierung betrifft, und Du stellst Dir das stattdessen so vor, wie von @Tronjer empfohlen?

https://www.w3schools.com/code/tryit.asp?filename=FEHEPQ6ITTTK (auf "Run" klicken)

Meine gestrige Empfehlung bezog sich nämlich auf die Menüpunkte innerhalb der Navbar.