Bootstrap** uygulamasında, solda Logo A, ortada menü öğeleri ve sağda Logo B bulunan bir gezinme çubuğu oluşturmanın en platform dostu yolu nedir?
Şimdiye kadar denediğim şey şu: Logo A solda, logonun yanındaki menü öğeleri solda ve Logo B sağda olacak şekilde hizalanıyor.
<div class="navbar navbar-fixed-top navbar-custom ">
<div class="container" >
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><span class="navbar-logo">Logo_A</span></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">Menu Item 1</a></li>
<li><a href="#contact">Menu Item 2</a></li>
<li><a href="#about">Menu Item 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><img src="images/Logo_B.png" class="img-responsive"></a></li>
</ul>
</div>
</div>
</div>
2019 Güncellemesi
Artık Bootstrap 4 flexbox'a sahip olduğu için Navbar hizalaması çok daha kolay. İşte Bootstrap 4 Navbar'da sol, sağ ve merkez için güncellenmiş örnekler ve burada gösterilen diğer birçok hizalama senaryosu.
flexbox](http://getbootstrap.com/docs/4.1/utilities/flex/), auto-margins ve ordering yardımcı sınıfları, Navbar içeriğini gerektiği gibi hizalamak için kullanılabilir. Hem büyük ekranlarda hem de mobil/daraltılmış görünümlerde Navbar öğelerinin (marka, bağlantılar, toggler) sırası ve hizalanması dahil olmak üzere dikkate alınması gereken birçok husus vardır. Navbar için ızgara sınıflarını (row,col) kullanmayın.
İşte çeşitli örnekler...
Sol, orta (marka) ve sağ bağlantılar:
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Left</a>
</li>
<li class="nav-item">
<a class="nav-link" href="//codeply.com">Codeply</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
<div class="mx-auto order-0">
<a class="navbar-brand mx-auto" href="#">Navbar 2</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
http://www.codeply.com/go/qhaBrcWp3v
Başka bir BS4 Navbar seçeneği merkez bağlantılar ve yer paylaşımlı logo resmi:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="navbar-collapse collapse w-100 dual-collapse2 order-1 order-md-0">
<ul class="navbar-nav ml-auto text-center">
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
<div class="mx-auto my-2 order-0 order-md-1 position-relative">
<a class="mx-auto" href="#">
<img src="//placehold.it/120/ccff00" class="rounded-circle">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 dual-collapse2 order-2 order-md-2">
<ul class="navbar-nav mr-auto text-center">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
Veya, bu diğer Bootstrap 4 hizalama senaryoları:
sol marka, ölü orta bağlantılar, (sağ boş)
marka ve bağlantılar ortada, simgeler solda ve sağda
Daha fazla Bootstrap 4 örneği:
mobi̇lde sola, markada sağa geçi̇ş
mobilde marka ve bağlantıları ortala
masaüstünde bağlantıları sağa hizala, mobilde bağlantıları ortala
sol bağlantılar & toggler, orta marka, sağ arama
Ayrıca bakınız: https://stackoverflow.com/questions/41513463/bootstrap-4-align-navbar-item-to-the-right
https://stackoverflow.com/questions/51852374/bootstrap-4-navbar-right-align-with-button-that-doesnt-collapse-on-mobile
https://stackoverflow.com/questions/33867603/center-an-element-in-bootstrap-4-navbar
Seçenek 1 - Marka merkezi, sol/sağ nav bağlantıları ile:
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<a class="navbar-brand" href="#">Brand</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li><a href="#">Left</a></li>
<li><a href="#about">Left</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">Right</a></li>
<li><a href="#contact">Right</a></li>
</ul>
</div>
</nav>
.navbar-brand
{
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin:0 auto;
}
.navbar-toggle {
z-index:3;
}
Seçenek 2 - Sol, orta ve sağ nav bağlantıları:
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Left</a></li>
</ul>
<ul class="nav navbar-nav navbar-center">
<li><a href="#">Center</a></li>
<li><a href="#">Center</a></li>
<li><a href="#">Center</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Right</a></li>
</ul>
</div>
</nav>
@media (min-width: 768px) {
.navbar-nav.navbar-center {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
}
http://www.bootply.com/SGYC6BWeBK
Seçenek 3 - Hem markayı hem de bağlantıları ortalayın
.navbar .navbar-header,
.navbar-collapse {
float:none;
display:inline-block;
vertical-align: top;
}
@media (max-width: 768px) {
.navbar-collapse {
display: block;
}
}
http://www.codeply.com/go/1lrdvNH9GI
Daha fazla örnek:
Sol marka, orta bağlantılar
Sol geçiş, orta marka
3.x için ayrıca bkz. nav-justified: https://stackoverflow.com/questions/21453781/bootstrap-center-navbar/21459341#21459341
https://stackoverflow.com/questions/39945599/center-navbar-in-bootstrap/42736011#42736011
https://stackoverflow.com/questions/41513463/
Benzer bir şeye ihtiyacım vardı (sol, orta ve sağa hizalanmış öğeler), ancak ortalanmış öğeleri etkin olarak işaretleme yeteneği ile. Benim için işe yarayan şey şuydu:
http://www.bootply.com/CSI2KcCoEM
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left"><a href="#">Left 1</a></li>
<li class="navbar-left"><a href="#">Left 2</a></li>
<li class="active"><a href="#">Center 1</a></li>
<li><a href="#">Center 2</a></li>
<li><a href="#">Center 3</a></li>
<li class="navbar-right"><a href="#">Right 1</a></li>
<li class="navbar-right"><a href="#">Right 2</a></li>
</ul>
</div>
</nav>
CSS:
@media (min-width: 768px) {
.navbar-nav {
width: 100%;
text-align: center;
}
.navbar-nav > li {
float: none;
display: inline-block;
}
.navbar-nav > li.navbar-right {
float: right !important;
}
}
Sol, orta ve sağ öğelerinizin içeriğine bağlı olarak aşağıdakinin daha iyi bir çözüm olduğunu buldum. Kenar boşluğu olmadan %100 genişlik div'lerin üst üste binmesine neden oluyor ve çapa etiketlerinin düzgün çalışmasını engelliyordu - yani z-indekslerinin karmaşık kullanımı olmadan.
.navbar-brand
{
position: absolute;
width: 100%;
left: 0;
margin: auto;
margin-left: 48%;
}