Bootstrap-Navbar zentrieren

html.de-Forum HTML, XHTML & CSS
1

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

[HTML]

[/HTML] QUELLE W3 School

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

2

Wundert es Dich, wo doch

  • mit float:left|right ausgestattet ist?

    Siehe hierzu die Online-Dokumentation:
    [ul]
    [li] https://getbootstrap.com/components/#navbar-component-alignment [/li]
    [li] http://holdirbootstrap.de/komponenten/#navbar-component-alignment [/li][/ul]
    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

    • 3

    Ok, wenn ich das obere BSP einmal aufgreife:

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

    .container-fluid {
    text-align: center;
    }[/HTML]

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

    4

    Es würde mir ernsthaft zu denken geben, wo doch beide dort verlinkten Fiddle-Demos funktionieren!
    [ul]
    [li] http://jsfiddle.net/bdd9U/2/ [/li]
    [li] http://jsfiddle.net/bdd9U/3/ [/li][/ul]
    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.

    5

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

    6

    Du musst deine Navbar in ein

    einbetten. Dann steht sie auch mittig.

    7

    Ah okay
    also um <nav class=„navbar navbar-inverse“> einfach

    ??

    Ja stimmt das ist die Lösung!

    Danke Tronjer!!!

    8

    OK 2. Anlauf :smiley:

    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 :cool:

    Wie gesagt:

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

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

    9

    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 :wink:

    10

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

    11

    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.