Kā izlīdzināt navigācijas joslas elementu pa labi?
Es gribu, lai pieteikšanās un reģistrācija būtu labajā pusē. Bet šķiet, ka viss, ko mēģinu, nedarbojas.
<div>
ap <ul>
ar atribūtu: style="float: right"
<div>
ap <ul>
ar atribūtu: style="text-align: right"
<li>
tagos!important
.nav-item
uz nav-right
<li>
pull-sm-right
klasi <li>
<li>
pievienota align-content-end
klase.<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 ir dažādi dažādi navigācijas joslas elementu izlīdzināšanas veidi. float-right
nedarbosies, jo navigācijas josla tagad ir flexbox
.
Jūs varat izmantot jauno mr-auto
automātiskai labās malas rezervei 1 (kreisajā) navbar-nav
.
Alternatīvi, ml-auto
var izmantot **2. (labajā) navbar-nav
, vai ja jums ir tikai viena 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
Ir arī flexbox palīgrīki. Šajā gadījumā jums ir 2 navbar-nav
, tāpēc justify-content-between
in navbar-collapse
varētu izlīdzināt atstarpi starp tām,
<div class="navbar-collapse collapse justify-content-between">
<ul class="navbar-nav mr-auto">
..
</ul>
<ul class="navbar-nav">
..
</ul>
</div>
Sākot ar Bootstrap 4 beta versiju, ml-auto
joprojām darbosies, lai atvirzītu elementus pa labi. Tikai ņemiet vērā, ka navbar-toggleable-
klases ir mainītas uz navbar-expand-*
.
Atjaunināts navigācijas josla pa labi Bootstrap 4
Vēl viens biežs Bootstrap 4 navigācijas joslas labajā pusē izlīdzināšanas scenārijs ietver pogu labajā pusē, kas paliek ārpus mobilās salokāmās navigācijas, lai tā vienmēr būtu redzama visos platumos.
Labajā pusē vienmēr redzama izlīdzināšanas poga
Manā gadījumā es vēlējos tikai vienu navigācijas pogu / opciju kopumu un konstatēju, ka tas darbojas:
<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>
Tātad, jūs pievienosiet justify-content-end
div un izlaidīsiet mr-auto
sarakstā.
Šeit ir darba piemērs.
Es'esmu jauns, lai stack overflow un jauns, lai front end attīstība. Tas ir tas, kas man palīdzēja. Tātad es negribēju, lai tiktu parādīti saraksta elementi.
.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>