Hvad er den mest platformsvenlige måde at oprette en navigationslinje med Logo A til venstre, menupunkter i midten og Logo B til højre i Bootstrap?
Her er hvad jeg har prøvet indtil videre, og det ender med at blive justeret, så Logo A er til venstre, menupunkter ved siden af logoet til venstre og Logo B til højre.
<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 opdatering
Nu hvor Bootstrap 4 har flexbox, er det meget nemmere at justere Navbars linjeføring. Her er [opdaterede eksempler på venstre, højre og center i Bootstrap 4 Navbar] (http://www.codeply.com/go/qhaBrcWp3v), og [mange andre justeringsscenarier demonstreret her] (https://www.codeply.com/go/kTGlK9Axdk).
Hjælpeklasserne flexbox, auto-margins og ordering kan bruges til at justere Navbar-indholdet efter behov. Der er mange ting at tage hensyn til, herunder rækkefølgen og tilpasningen af Navbar-elementer (brand, links, toggler) på både store skærme og mobil/indklappede visninger. Don't bruge gitterklasserne (row,col) til Navbar.
Her er forskellige eksempler...
Venstre, center(brand) og højre links:
[]]1
<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
En anden BS4 Navbar mulighed med [center links og overlay logo image]] (https://www.codeply.com/go/0xSGj0EsAu):
[]]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>
Og, disse andre Bootstrap 4 tilpasningsscenarier:
[brand left, dead center links, (empty right)] (https://www.codeply.com/go/Z5klFmvHbW)
[]]3
brand og links i midten, ikoner til venstre og højre
[]]4
Mere Bootstrap 4 eksempler:
toggler til venstre på mobil, brand til højre
center brand og links på mobil
højrejustering af links på desktop, centrer links på mobil
venstre links & toggler, center mærke, søg til højre
Se også: 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
Mulighed 1 - Brand center, med venstre/højre nav-links:
[]]5
<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;
}
Mulighed 2 - Venstre, midterste og højre nav-links:
[]]6
<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
Mulighed 3 - Centrer både mærke og links
[]]7
.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
Flere eksempler:
Venstre mærke, links i midten
Venstre toggler, center brand
For 3.x se også 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/
Jeg havde brug for noget lignende (venstre, midterste og højrejusterede elementer), men med mulighed for at markere centrerede elementer som aktive. Hvad fungerede for mig var:
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;
}
}
Jeg fandt følgende løsning som en bedre løsning, afhængigt af indholdet af dine venstre, midterste og højre elementer. En bredde på 100% uden margin forårsagede overlapning af divs og forhindrede ankertags i at fungere korrekt - det vil sige uden den rodet brug af z-indekser.
.navbar-brand
{
position: absolute;
width: 100%;
left: 0;
margin: auto;
margin-left: 48%;
}