Pembaruan 2019
Bootstrap 4
Sekarang Bootstrap 4 memiliki flexbox, penyelarasan Navbar jauh lebih mudah. Berikut adalah contoh yang diperbarui untuk kiri , kanan dan tengah di Bootstrap 4 Navbar , dan banyak skenario penyelarasan lain yang ditunjukkan di sini .
Kelas utilitas flexbox , margin otomatis , dan pemesanan dapat digunakan untuk menyelaraskan konten Navbar sesuai kebutuhan. Ada banyak hal yang perlu dipertimbangkan termasuk urutan dan penyelarasan item Navbar (merek, tautan, toggler) pada layar besar dan tampilan seluler / runtuh. Jangan gunakan kelas kisi (baris, kolom) untuk Navbar .
Berikut adalah berbagai contoh ...
Tautan kiri, tengah (merek) dan kanan:
<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
Opsi BS4 Navbar lain dengan tautan tengah dan gambar logo overlay :
<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>
Atau , skenario penyelarasan Bootstrap 4 lainnya ini:
kiri merek, tautan mati di tengah, (kanan kosong)
pusat merek dan tautan, ikon kiri dan kanan
Lebih banyak Bootstrap 4 contoh :
toggler kiri pada seluler, merek
tengah kanan merek dan tautan pada tautan
lurus kanan seluler di desktop, tautan tengah pada tautan kiri seluler
& toggler, merek tengah, cari kanan
Lihat juga: Bootstrap 4 sejajarkan item navbar ke kanan.
Bootstrap 4 navbar kanan sejajar dengan tombol yang tidak runtuh di seluler.
Pusatkan elemen di Bootstrap 4 Navbar
Bootstrap 3
Opsi 1 - Pusat Merek, dengan tautan nav kiri / kanan:
<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;
}
http://bootply.com/98314 (3.x)
Opsi 2 - Tautan kiri, tengah dan kanan:
<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
Opsi 3 - Pusatkan merek dan tautan
.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
Lebih banyak contoh:
Merek kiri, tautan tengah
toggler kiri, merek tengah
Untuk 3.x juga lihat nav-justified: Bootstrap center navbar
Pusat Navbar di Bootstrap
Bootstrap 4 sejajarkan item navbar ke kanan
