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