Στο Bootstrap, ποιος είναι ο πιο φιλικός προς την πλατφόρμα τρόπος για να δημιουργήσετε μια γραμμή πλοήγησης που έχει το λογότυπο Α στα αριστερά, τα στοιχεία μενού στο κέντρο και το λογότυπο Β στα δεξιά;
Εδώ είναι αυτό που έχω δοκιμάσει μέχρι στιγμής, και καταλήγει να ευθυγραμμίζεται έτσι ώστε το Λογότυπο Α να είναι στα αριστερά, τα στοιχεία μενού δίπλα στο λογότυπο στα αριστερά και το Λογότυπο Β στα δεξιά.
<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
Τώρα που το Bootstrap 4 διαθέτει flexbox, η ευθυγράμμιση της γραμμής πλοήγησης είναι πολύ πιο εύκολη. Εδώ υπάρχουν ενημερωμένα παραδείγματα για αριστερά, δεξιά και κέντρο στη γραμμή πλοήγησης του Bootstrap 4, και πολλά άλλα σενάρια ευθυγράμμισης που παρουσιάζονται εδώ.
Οι βοηθητικές κλάσεις flexbox, auto-margins και ordering μπορούν να χρησιμοποιηθούν για την ευθυγράμμιση του περιεχομένου της Navbar όπως απαιτείται. Υπάρχουν πολλά πράγματα που πρέπει να λάβετε υπόψη, συμπεριλαμβανομένης της σειράς και της ευθυγράμμισης των στοιχείων της Navbar (μάρκα, σύνδεσμοι, εναλλακτήρες) τόσο στις μεγάλες οθόνες όσο και στις προβολές για κινητά/κλιμακωτές συσκευές. Μην χρησιμοποιείτε τις κλάσεις πλέγματος (row,col) για το Navbar.
Ακολουθούν διάφορα παραδείγματα...
Αριστερός, κεντρικός (μάρκα) και δεξιός σύνδεσμος:
<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
<br>,
Άλλη μια επιλογή BS4 Navbar με κεντρικούς συνδέσμους και επικάλυψη εικόνας λογότυπου:
[]]2
<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>
<br>,
ή, αυτά τα άλλα σενάρια ευθυγράμμισης του Bootstrap 4:
(https://www.codeply.com/go/Z5klFmvHbW)<br>,
<hr>,
μάρκα και σύνδεσμοι στο κέντρο, εικονίδια αριστερά και δεξιά<br>,
<hr>,
Περισσότερα παραδείγματα Bootstrap 4:
toggler αριστερά στο κινητό, μάρκα δεξιά<br>, κέντρο μάρκας και συνδέσμων στο κινητό<br>, δεξιά στοίχιση συνδέσμων στην επιφάνεια εργασίας, κέντρο συνδέσμων στο κινητό<br>, αριστερά σύνδεσμοι & toggler, κέντρο μάρκας, αναζήτηση δεξιά<br>,
<hr>,
Δείτε επίσης: https://stackoverflow.com/questions/41513463/bootstrap-4-align-navbar-item-to-the-right<br/>, https://stackoverflow.com/questions/51852374/bootstrap-4-navbar-right-align-with-button-that-doesnt-collapse-on-mobile<br/>, https://stackoverflow.com/questions/33867603/center-an-element-in-bootstrap-4-navbar
<hr>,
Επιλογή 1 - Κέντρο μάρκας, με συνδέσμους πλοήγησης αριστερά/δεξιά:
<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;
}
<hr>,
Επιλογή 2 - Αριστερός, κεντρικός και δεξιός σύνδεσμος πλοήγησης:
<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
Επιλογή 3 - Κεντράρετε τόσο το εμπορικό σήμα όσο και τους συνδέσμους
.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
Περισσότερα παραδείγματα:
Αριστερή μάρκα, κεντρικοί σύνδεσμοι<br>, Αριστερά toggler, κέντρο μάρκας<br>,
Για 3.x δείτε επίσης nav-justified: https://stackoverflow.com/questions/21453781/bootstrap-center-navbar/21459341#21459341
<hr>,
https://stackoverflow.com/questions/39945599/center-navbar-in-bootstrap/42736011#42736011
https://stackoverflow.com/questions/41513463/<br>,
Χρειαζόμουν κάτι παρόμοιο (αριστερά, στο κέντρο και δεξιά ευθυγραμμισμένα στοιχεία), αλλά με τη δυνατότητα να επισημάνω τα κεντραρισμένα στοιχεία ως ενεργά. Αυτό που λειτούργησε για μένα ήταν:
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;
}
}
Βρήκα ότι η ακόλουθη λύση ήταν καλύτερη, ανάλογα με το περιεχόμενο των αριστερών, κεντρικών και δεξιών στοιχείων σας. Ένα πλάτος 100% χωρίς περιθώριο προκαλούσε επικάλυψη των divs και εμπόδιζε τις ετικέτες άγκυρας να λειτουργήσουν σωστά - δηλαδή χωρίς την ακατάστατη χρήση των δεικτών z.
.navbar-brand
{
position: absolute;
width: 100%;
left: 0;
margin: auto;
margin-left: 48%;
}