Cập nhật 2019
Bootstrap 4
Bây giờ Bootstrap 4 đã có flexbox, việc căn chỉnh Navbar dễ dàng hơn nhiều. Dưới đây là các ví dụ cập nhật cho trái , phải và giữa trong Thanh điều khiển Bootstrap 4 và nhiều kịch bản căn chỉnh khác được trình bày ở đây .
Có thể sử dụng flexbox , lề tự động và các lớp tiện ích đặt hàng để căn chỉnh nội dung Navbar khi cần. Có nhiều điều cần xem xét bao gồm thứ tự và căn chỉnh của các mục Navbar (nhãn hiệu, liên kết, toggler) trên cả màn hình lớn và chế độ xem di động / bị sập. Không sử dụng các lớp lưới (hàng, col) cho Navbar .
Dưới đây là nhiều ví dụ khác nhau ...
Liên kết trái, trung tâm (thương hiệu) và phải:
<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
Một tùy chọn Navbar BS4 khác với các liên kết trung tâm và hình ảnh logo lớp phủ :
<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>
Hoặc , các kịch bản căn chỉnh Bootstrap 4 khác:
nhãn hiệu trái, liên kết trung tâm chết, (trống bên phải)
thương hiệu và trung tâm liên kết, biểu tượng trái và phải
Thêm Bootstrap 4 ví dụ :
toggler bên trái trên thiết bị di động, thương hiệu
trung tâm bên phải và liên kết trên di động
bên phải liên kết trên máy tính để bàn, liên kết trung tâm trên liên kết bên trái di động
& toggler, thương hiệu trung tâm, tìm kiếm bên phải
Xem thêm: Bootstrap 4 căn chỉnh các mục thanh
điều hướng bên phải Thanh điều hướng bên phải Bootstrap 4 thẳng hàng với nút không sụp đổ trên Trung tâm di động
một thành phần trong Bootstrap 4 Navbar
Bootstrap 3
Tùy chọn 1 - Trung tâm thương hiệu, với các liên kết điều hướng trái / phải:
<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)
Tùy chọn 2 - Liên kết điều hướng trái, giữa và phải:
<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
Tùy chọn 3 - Trung tâm cả thương hiệu và liên kết
.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/1lrvNH9GI
Ví dụ khác:
Trái thương hiệu, trung tâm liên kết
Trái toggler, thương hiệu trung tâm
Đối với 3.x cũng thấy nav-justified: thanh điều hướng trung tâm Bootstrap
Center Navbar trong Bootstrap
Bootstrap 4 căn chỉnh các mục thanh điều hướng bên phải
