Kaip išlyginti navbar elementą į dešinę?
Noriu, kad prisijungimas ir registracija būtų dešinėje. Bet viskas, ką bandau, atrodo, neveikia.
<div>
aplink <ul>
su atributu: style="float: right"
<div>
aplink <ul>
su atributu: style="text-align: right"
<li>
žymėse!important
pabaigojenav-item
į nav-right
žodyje <li>
<li>
pridėjo pull-sm-right
klasę<li>
pridėta align-content-end
klasė<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 turi daugybę skirtingų navbar elementų išlyginimo būdų. float-right
neveiks, nes navbar dabar yra flexbox
.
Galite naudoti naująją mr-auto
, kad 1 (kairėje) navbar-nav
juostoje būtų automatinė dešinioji paraštė.
**Arba, jei turite tik vieną navbar-nav
, galite naudoti ml-auto
antrajam (dešiniajam) navbar-nav
arba jei turite tik vieną 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
Taip pat yra flexbox įrankių. Šiuo atveju turite 2 navbar-nav
, todėl justify-content-between
, esantis navbar-collapse
, išlygintų tarpą tarp jų,
<div class="navbar-collapse collapse justify-content-between">
<ul class="navbar-nav mr-auto">
..
</ul>
<ul class="navbar-nav">
..
</ul>
</div>
Nuo "Bootstrap 4 beta" versijos ml-auto
vis dar veiks, jei norite elementus pastumti į dešinę. Tik žinokite, kad navbar-toggleable-
klasės pakeistos į navbar-expand-*
.
Atnaujinta navbar dešinėje "Bootstrap 4"
Dar vienas dažnas "Bootstrap 4 Navbar" dešiniosios navbar dalies derinimo scenarijus apima mygtuką dešinėje, kuris išlieka už mobiliojo susilankstymo nav, kad jis visada būtų rodomas esant bet kokiam pločiui.
Dešiniojo lygiavimo mygtukas, kuris visada matomas
Mano atveju norėjau tik vieno navigacijos mygtukų / parinkčių rinkinio, todėl radau, kad tai veikia:
<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>
Taigi, į divą pridėsite justify-content-end
, o sąraše praleisite mr-auto
.
Štai darbinis pavyzdys.
Aš'esu naujas stack overflow ir naujas priekinės dalies kūrimas. Tai yra tai, kas man pavyko. Taigi aš nenorėjau, kad būtų rodomi sąrašo elementai.
.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>