Hur anpassar jag ett objekt i navigeringsfältet till höger?
Jag vill ha inloggning och registrering till höger. Men allt jag försöker verkar inte fungera.
[]]1
<div>
runt <ul>
med attributet: style="float: right"
<div>
runt <ul>
med attributet: style="text-align: right"
<li>
.!important
i slutet.nav-item
till nav-right
i <li>
pull-sm-right
i <li>
align-content-end
har lagts till i <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 har [många olika sätt att anpassa navbalkens objekt] (https://stackoverflow.com/questions/19733447/bootstrap-navbar-with-left-center-or-right-aligned-items). float-right
kommer inte att fungera eftersom navbaret nu är flexbox
.
Du kan använda det nya mr-auto
för automatisk högermarginal på 1:a (vänster) navbar-nav
.
Alternativt kan ml-auto
användas på 2:a (höger) navbar-nav
, eller om du bara har en enda navbar-nav
.
<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
Det finns också verktyg för flexbox. I det här fallet har du 2 navbar-nav
s, så justify-content-between
i navbar-collapse
skulle fungera för att jämna ut utrymmet mellan dem,
<div class="navbar-collapse collapse justify-content-between">
<ul class="navbar-nav mr-auto">
..
</ul>
<ul class="navbar-nav">
..
</ul>
</div>
Från och med Bootstrap 4 beta fungerar ml-auto
fortfarande för att skjuta objekt till höger. Var bara medveten om att klasserna navbar-toggleable-
har ändrats till navbar-expand-*
.
Uppdaterad [navbar höger för Bootstrap 4] (http://www.codeply.com/go/P0G393rzfm)
Ett annat vanligt scenario för Bootstrap 4 Navbar right alignment inkluderar en knapp till höger som blir utanför mobile collapse nav så att den alltid visas på alla bredder.
[Högeranpassad knapp som alltid är synlig] (https://www.codeply.com/go/ljI9F6aRLk)
[]]1
[]]2
I mitt fall ville jag bara ha en uppsättning navigeringsknappar/alternativ och fann att detta fungerar:
<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>
Du lägger alltså till justify-content-end
till div:en och utelämnar mr-auto
i listan.
Här är ett fungerande exempel.
Jag är ny på stack overflow och ny på front end-utveckling. Detta är vad som fungerade för mig. Så jag ville inte att listobjekt skulle visas.
.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>