Hoe lijn ik een item in de navigatiebalk naar rechts uit?
Ik wil de login en register aan de rechterkant hebben. Maar alles wat ik probeer lijkt niet te werken.
<div>
om de <ul>
met het atribuut: style="float: right"
<div>
rond de <ul>
met het atribuut: style="text-align: right"
<li>
tags!important
toegevoegd aan het eindnav-item
veranderd in nav-right
in de <li>
pull-sm-right
class toegevoegd aan de <li>
align-content-end
klasse toegevoegd aan de <li>
<div id="app" class="container">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricingg</a>
</li>
</ul>
<ul class="navbar-nav " >
<li class="nav-item">
<a class="nav-link" href="{{ url('/login') }}">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url('/register') }}">Register</a>
</li>
</ul>
</nav>
@yield('content')
</div>
Bootstrap 4 heeft veel verschillende manieren om navbar items uit te lijnen. float-right
zal niet werken omdat de navbar nu flexbox
is.
U kunt de nieuwe mr-auto
gebruiken voor automatische rechtermarge op de 1e (linker) navbar-nav
.
Aternatief, ml-auto
kan worden gebruikt op de 2e (rechter) navbar-nav
, of als u slechts een enkele navbar-nav
heeft.
<div id="app" class="container">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricingg</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="{{ url('/login') }}">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url('/register') }}">Register</a>
</li>
</ul>
</nav>
</div>
http://www.codeply.com/go/P0G393rzfm
Er zijn ook flexbox utils. In dit geval heb je 2 navbar-nav
s, dus justify-content-between
in navbar-collapse
zou werken om de ruimte ertussen gelijk te maken,
<div class="navbar-collapse collapse justify-content-between">
<ul class="navbar-nav mr-auto">
..
</ul>
<ul class="navbar-nav">
..
</ul>
</div>
Vanaf Bootstrap 4 beta, zal ml-auto
nog steeds werken om items naar rechts te duwen. Let alleen op dat de navbar-toggleable-
classes zijn veranderd in navbar-expand-*
Bijgewerkt navbar rechts voor Bootstrap 4
Een andere veel voorkomende Bootstrap 4 Navbar rechts uitlijning scenario omvat een knop aan de rechterkant die blijft buiten de mobiele collapse nav zodat het altijd wordt weergegeven op alle breedtes.
Rechts uitlijnen knop die altijd zichtbaar is
In mijn geval wilde ik slechts één set navigatieknoppen/opties en ontdekte dat dit zal werken:
<div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Sign Out</a>
</li>
</ul>
</div>
Dus, je voegt justify-content-end
toe aan de div en laat mr-auto
weg in de lijst.
Hier is een werkend voorbeeld.
Ik ben nieuw bij stack overflow en nieuw bij front-end ontwikkeling. Dit is wat voor mij werkte. Dus ik wilde niet dat lijst-items werden weergegeven.
.hidden {
display:none;
}
#loginButton{
margin-right:2px;
}
<nav class="navbar navbar-toggleable-md navbar-light bg-faded fixed-top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">NavBar</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active hidden">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item hidden">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item hidden">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="loginButton"><a href="#">Log In</a></button>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit"><a href="#">Register</a></button>
</form>
</div>
</nav>