Bir navbar öğesini nasıl sağa hizalarım?
Giriş yapmak ve sağ tarafa kaydolmak istiyorum. Ancak denediğim hiçbir şey işe yaramıyor gibi görünüyor.
<ul>
etrafında <div>
: style="float: right"
<ul>
etrafında <div>
: style="text-align: right"
<li>
etiketleri üzerinde denedim!important
ekleyerek tekrar denedim<li>
içindeki nav-item
i nav-right
olarak değiştirdiye bir
align-content-end` sınıfı eklendi<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, navbar öğelerini hizalamak için birçok farklı yola sahiptir. navbar artık flexbox
olduğu için float-right
çalışmayacaktır.
Yeni mr-auto
özelliğini 1. (sol) navbar-nav
üzerinde otomatik sağ kenar boşluğu için kullanabilirsiniz.
Alternatif olarak, ml-auto
2. (sağ) navbar-nav
üzerinde veya sadece tek bir navbar-nav
varsa kullanılabilir.
<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
Ayrıca flexbox yardımcı programları da vardır. Bu durumda, 2 navbar-nav
ınız var, bu nedenle navbar-collapse
içindeki justify-content-between
aralarındaki boşluğu eşitleyecektir,
<div class="navbar-collapse collapse justify-content-between">
<ul class="navbar-nav mr-auto">
..
</ul>
<ul class="navbar-nav">
..
</ul>
</div>
Bootstrap 4 beta sürümünden itibaren, ml-auto
öğeleri sağa itmek için çalışmaya devam edecektir. Sadece navbar-toggleable-
sınıflarının navbar-expand-*
olarak değiştiğini unutmayın.
Güncellendi Bootstrap 4 için sağ navbar
Sıklıkla karşılaşılan bir başka Bootstrap 4 Navbar sağ hizalama senaryosu da sağda mobil daraltma nav'ının dışında kalan bir düğme içerir, böylece her zaman tüm genişliklerde gösterilir.
Her zaman görünür olan sağ hizalama düğmesi
Benim durumumda, sadece bir dizi gezinme düğmesi / seçeneği istedim ve bunun işe yarayacağını gördüm:
<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>
Böylece, div'e justify-content-end
ekleyecek ve listedeki mr-auto
öğesini çıkaracaksınız.
İşte bir çalışma örneği.
Stack overflow'da yeniyim ve ön uç geliştirmede yeniyim. Bu benim için işe yaradı. Bu yüzden liste öğelerinin görüntülenmesini istemedim.
.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>