Bootstrap Navigation

Stef · 11. Dezember 2017

Hey,

ich bin dabei mit Bootstrap rumzuspielen.

Nun bin ich bei der Navigation. Habe mir dieses Thema in der Bootstrap-Doku mir durchgelesen und mal etwas getestet. Wie es in der Doku drinsteht geht es aber nicht. Ich erhalte mit dem selben code ein komplett anderes Ergebnis.

Ich versuche das Formular in der Navbar nach ganz rechts zu bekommen. Dabei sollen die Menüpunkte aber links bleiben. Aber genau das geht nicht. Von der Doku werde ich auch nicht schlau. Da steht nix drin. Wenn man als Klasse neben nav noch justify-content-between hinzufügt wird jedem Menüpunkt padding gegeben, sodass die ganze Navbar mit dem Elementen befüllt ist.

Aber das will ich nicht. Und wenn ich die form auserhalb ul erstelle dann wird diese nicht in die gleiche Reihe wie die Navbar positioniert sondern untendrunter. Das darf laut der Doku nicht passieren. Aber es passiert.

Weiß jemand weiter?

Mein Code:

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <title>Test</title>

        <!-- Verlinkung zu der CSS-Datei -->
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

    </head>
<body>
    <header>
        <nav class="navbar navbar-dark bg-primary">
            
            <ul class="nav justify-content-between">
                <li><a class="navbar-brand text-white" href="#">Test</a></li>
                <li class="nav-item"><a class="nav-link text-white" href="#">Punkt1</a></li>
                <li class="nav-item"><a class="nav-link text-white" href="#">Punkt2</a></li>
                <li class="nav-item"><a class="nav-link text-white" href="#">Punkt3</a></li>

                
                <form class="form-inline">
                    <input type="search" class="form-control" name="search" aria-label="Search" placeholder="Search...">
                    <button type="submit" class="btn btn-outline-success text-black">Dark</button>
                </form>
            </ul>
        </nav>
    </header>



    <!-- Verlinkung zu den JS-Dateien -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

Alles anzeigen

derneue2017 · 12. Dezember 2017

Was mache ich Falsch.

Ich habe da nur ein langes SEARCH Feld und einen grauen Button mit DARK draufstehen und einen blauen Header.

Da sieht mandas ich noch Anfänger bin und das nicht mal in einer Fiddle zum laufen bekomme.

Schade würde gerne mehr helfen wenn ich es schon könnte.

Hoffe du findest bei wem anders hilfe.

JR Cologne · 12. Dezember 2017

Versuch es mal ohne justify-content und dafür mit "ml-auto" (steht für margin-left-auto) bei deinem Form.

Fange auch gerade erst mit Bootstrap an, bin mir daher also nicht so sicher.

Ansonsten müsste es eigentlich aber auch mit Flexbox funktionieren, wenn du d-flex und justify-content der .navbar zuweist.

NaThan · 12. Dezember 2017

Stef welche Bootstrapversion verwendest du?

Bei Bootstrap v 3.3.7 musst du es so machen:Code
Livedemo: https://jsfiddle.net/q00c7w9a/

Code

Hier wird durch die Klassen nav navbar-nav navbar-right die Position festgelegt.

Wenn du Bootstrap v4.0 verwendest müsstest du die Navigation folgendermaßen machen:

Livedemo: https://jsfiddle.net/h7bew08h/

Code

Bootstrap 4.0 arbeitet übergehend mit Flex daher ist der umstieg meiner Meinung nach etwas kompliziert.

Hoffe ich konnte dir weiterhelfen

Grüße

Stef · 14. Dezember 2017

Hey,

ich benutze Bootstrap 4.

Mein Problem war so einfach zu beheben. Habe nicht richtig nachgedacht.

Der Grund warum es so angezeigt wird ist, weil ich alle elemente in die unordned list gecodet habe. Das justify-content-beetween wird angewendet um alle ausenliegenden Elemente zu trennen (mehr Platz zu geben). Mit ausliegende Elemente meine ich die Elemente, welche auserhalb der unordned List sind.

Ich musste den link mit der class navbar-brand sowie die form außerhalb der ul positionieren. Dann hat es funktioniert.

HTML

<header>
        <nav class="navbar navbar-dark bg-primary justify-content-between">
            <a class="navbar-brand text-white" href="#">Test</a>
            <ul class="nav">
               
                <li class="nav-item"><a class="nav-link text-white" href="#">Punkt1</a></li>
                <li class="nav-item"><a class="nav-link text-white" href="#">Punkt2</a></li>
                <li class="nav-item"><a class="nav-link text-white" href="#">Punkt3</a></li>               

            </ul>
        <form class="form-inline">
                    <input type="search" class="form-control" name="search" aria-label="Search" placeholder="Search...">
                    <button type="submit" class="btn btn-outline-success text-black">Dark</button>
                </form>
        </nav>
    </header>

Alles anzeigen

Danke für die Hilfe

Bootstrap Navigation

Jetzt mitmachen!

Teilen