Wat is in Bootstrap de meest platformvriendelijke manier om een navigatiebalk te maken met Logo A aan de linkerkant, menu-items in het midden en Logo B aan de rechterkant?
Dit is wat ik tot nu toe heb geprobeerd, en het wordt uiteindelijk zo uitgelijnd dat Logo A aan de linkerkant staat, menu-items naast het logo aan de linkerkant en Logo B aan de rechterkant.
<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>
Antwoord 1, autoriteit 100%
update 2021
Bootstrap 5 (bèta)
Bootstrap 5 heeft ook een flexbox-navigatiebalk en introduceert nieuwe RTL-ondersteuning. Om deze reden is het begrip “links” en “rechts” vervangen door “begin” en “eind”. Daarom zijn de margehulpprogramma’s gewijzigd voor Bootstrap 5 beta:
ml-auto
=>ms-auto
mr-auto
=>me-auto
Houd er rekening mee dat data-toggle
en data-target
ook zijn gewijzigd:
data-toggle
=>data-bs-toggle
data-target
=>data-bs-target
Bootstrap 4
Nu Bootstrap 4 flexbox heeft, is het uitlijnen van de navigatiebalk veel eenvoudiger. Hier zijn bijgewerkte voorbeelden voor links, rechts en center in de Bootstrap 4-navigatiebalk en vele andere uitlijningsscenario’s hier gedemonstreerd.
De flexbox, auto-marges en bestellen kunnen worden gebruikt om de inhoud van de Navbar naar behoefte uit te lijnen. Er zijn veel dingen waarmee u rekening moet houden, waaronder de volgorde en uitlijning van Navbar-items (merk, links, schakelaar) op zowel grote schermen als de mobiele/samengevouwen weergaven. Gebruik niet de rasterklassen (rij, col) voor de navigatiebalk.
Hier zijn verschillende voorbeelden…
Links, midden (merk) en rechts:
<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://codeply.com/go/qhaBrcWp3v
Nog een BS4 Navbar-optie met links en overlay-logoafbeelding:
<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>
Of, deze andere Bootstrap 4-uitlijningsscenario’s:
merk links, links in het midden, (leeg rechts)
centrum voor merk en links, pictogrammen links en rechts
Meer voorbeelden van Bootstrap 4:
schakelaar links op mobiel, merk rechts
center merk en links op mobiel
links rechts uitlijnen op desktop, links centreren op mobiel
links links & toggler, merk midden, zoek rechts
Zie ook: Bootstrap 4 navbar-items rechts uitlijnen
Bootstrap 4 navigatiebalk rechts uitgelijnd met knop die klapt niet in op mobiel
Center een element in Bootstrap 4 Navbar
Bootstrap 3
Optie 1 – Merkcentrum, met links/rechts navigatielinks:
<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)
Optie 2 – Links, midden en rechts navigatielinks:
<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%);
}
}
Optie 3 – Zowel merk als links centreren
.navbar .navbar-header,
.navbar-collapse {
float:none;
display:inline-block;
vertical-align: top;
}
@media (max-width: 768px) {
.navbar-collapse {
display: block;
}
}
http://codeply.com/go/1lrdvNH9GI
Meer voorbeelden:
Linker merk, middelste links
Linker schakelaar, middelste merk
Zie voor 3.x ook nav-justified: Bootstrap center navbar
Centrale navigatiebalk in Bootstrap
Bootstrap 4 navigatiebalkitems rechts uitlijnen
Antwoord 2, autoriteit 8%
Bootstrap 4
We hebben veel manieren om navBars-items uit te lijnen.
class = “navbar-nav mr-auto“
class = “navbar-nav ml-auto“
class = “navbar-nav mx-auto“
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a routerLink="/" class="navbar-brand" href="#">Bootsrap 4</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact">Contact us</a>
</li>
</ul>
</nav>
Antwoord 3, autoriteit 3%
Ik had iets soortgelijks nodig (links, gecentreerd en rechts uitgelijnde items), maar met de mogelijkheid om gecentreerde items als actief te markeren. Wat voor mij werkte was:
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;
}
}
Antwoord 4, autoriteit 3%
Bootstrap 4 (vanaf alpha 6)
Navbars zijn gebouwd met flexbox! In plaats van floats heb je flexbox- en margin-hulpprogramma’s nodig.
Gebruik voor Align Right justify-content-end
op de collapse
div:
<div class="collapse navbar-collapse justify-content-end">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
</ul>
</div>
Volledig voorbeeld hier: https://jsbin.com/kemawa/edit?output
Antwoord 5
Sla op mijn hoofd, herlees mijn antwoord en realiseerde me dat de OP om twee logo’s vroeg, een aan de linkerkant en een aan de rechterkant met een centraal menu, en niet andersom.
Dit kan strikt in de HTML worden bereikt door Bootstrap’s “navbar-right” en “navbar-left” voor de logo’s te gebruiken en vervolgens “nav-justified” in plaats van “navbar-nav” voor uw UB. Geen extra CSS nodig (tenzij je de navbar-collapse-schakelaar in het midden van de xs-viewport wilt plaatsen, dan moet je een beetje overschrijven, maar dat laat je aan jou over).
<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 class="navbar-brand navbar-left"><a href="#"><img src="https://placehold.it/150x30"></a></div>
</div>
<div class="navbar-brand navbar-right"><a href="#"><img src="https://placehold.it/150x30"></a></div>
<div class="navbar-collapse collapse">
<ul class="nav nav-justified">
<li><a href="#">home</a></li>
<li><a href="#about">about</a></li>
</ul>
</div>
</nav>
Bootply: http://www.bootply.com/W6uB8YfKxm
Voor degenen die hier kwamen om het “merk” te centreren, is hier mijn oude antwoord:
Ik weet dat deze thread een beetje oud is, maar om mijn bevindingen te posten wanneer ik hieraan werk. Ik besloot mijn oplossing te baseren op het antwoord van skelly sinds de pauzes van tomaszbak op collaspe. Eerst heb ik mijn “navbar-center” gemaakt en float uitgeschakeld voor de normale navigatiebalk in mijn CSS:
.navbar-center
{
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin: auto;
}
.navbar-brand{
float:none;
}
Het probleem met het antwoord van skelly is echter dat als je een erg lange merknaam hebt (of als je een afbeelding voor je merk wilt gebruiken), er, als je eenmaal bij de sm-viewport komt, er overlap kan zijn vanwege de absolute positie en als de commentatoren hebben gezegd dat als je eenmaal bij de xs-viewport bent, de tuimelschakelaar breekt (tenzij je Z-positionering gebruikt, maar ik wilde me er echt geen zorgen over maken).
Dus wat ik deed was de bootstrap responsieve hulpprogramma’s gebruiken om meerdere versies van het merk te maken blok:
<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 class="navbar-brand visible-xs"><a href="#">Brand That is Really Long</a></div>
</div>
<div class="navbar-brand visible-sm text-center"><a href="#">Brand That is Really Long</a></div>
<div class="navbar-brand navbar-center hidden-xs hidden-sm"><a href="#">Brand That is Really Long</a></div>
<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>
<li><a href="#">Left</a></li>
<li><a href="#about">Left</a></li>
<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>
<li><a href="#about">Right</a></li>
<li><a href="#contact">Right</a></li>
<li><a href="#about">Right</a></li>
<li><a href="#contact">Right</a></li>
</ul>
</div>
Dus nu hebben de lg- en md-viewports het merk gecentreerd met links en rechts, zodra u bij de sm-viewport komt, gaan uw links naar de volgende regel zodat u niet overlapt met uw merk, en dan eindelijk bij de xs viewport begint de collaspe en kun je de schakelaar gebruiken. Je zou nog een stap verder kunnen gaan en de mediaquery’s voor de navbar-right en navbar-left aanpassen bij gebruik met navbar-brand, zodat in de sm viewport de links allemaal gecentreerd zijn, maar je hebt niet de tijd gehad om het uit te zoeken.
Je kunt mijn oude bootply hier bekijken: www.bootply.com/n3PXXropP3
Ik denk dat het hebben van 3 merken net zo veel gedoe is als de “z”, maar ik heb het gevoel dat in de wereld van responsief ontwerp deze oplossing beter bij mijn stijl past.
Antwoord 6
U stelt de linkermarge in op auto -> ml-auto op de sectie die u naar rechts wilt verplaatsen.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto"> !<--MARGIN LEFT AUTO HERE !-->
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</div>
Antwoord 7
dit is een update voor BS5 en een voorgestelde bewerking voor het antwoord van @Zim. Helaas kan ik de bewerking niet indienen omdat de bewerkingswachtrij vol is. Het zou goed zijn als een gebruiker met een hoge reputatie de bewerking zou kunnen indienen zodra de wachtrij nieuwe bewerkingen toestaat.
update 2021
Bootstrap 5.0.0 beta-1
Met de toevoeging van RTL-ondersteuning worden ml-auto
en mr-auto
ms-auto
en me-auto
(links/rechts om te beginnen/eindigen).
Bootstrap 5 vereist ook dat de navigatiebalk zich in een container div
bevindt.
Deze code produceert het equivalent van het eerste voorbeeld van Bootstrap 4:
Links, midden (merk) en rechts:
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container-fluid">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
<ul class="navbar-nav me-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 ms-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>
</div>
</nav>
Antwoord 8
Ik vond dat het volgende een betere oplossing was, afhankelijk van de inhoud van je linker-, midden- en rechteritems. Een breedte van 100% zonder marge veroorzaakte overlapping van divs en verhinderde dat ankertags correct werkten – dat wil zeggen zonder het rommelige gebruik van z-indexen.
.navbar-brand
{
position: absolute;
width: 100%;
left: 0;
margin: auto;
margin-left: 48%;
}
Antwoord 9
Dit is een gedateerde vraag, maar ik heb een alternatieve oplossing gevonden om rechtstreeks vanaf de bootstrap github-pagina te delen. De documentatie is niet bijgewerkt en er zijn andere vragen over SO waarin om dezelfde oplossing wordt gevraagd, zij het op iets andere vragen. Deze oplossing is niet specifiek voor uw geval, maar zoals u kunt zien is de oplossing de <div class="container">
direct na <nav class="navbar navbar-default navbar-fixed-top">
maar kan indien nodig ook worden vervangen door <div class="container-fluid"
.
<!DOCTYPE html>
<html>
<head>
<title>Navbar right padding broken </title>
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#/" class="navbar-brand">Hello</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<div class="btn-group navbar-btn" role="group" aria-label="...">
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalLogin">Se connecter</button>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalSignin">Creer un compte</button>
</div>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
De oplossing werd gevonden op een viool op deze pagina:
https://github.com/twbs/bootstrap/issues/18362
en wordt vermeld als een ‘niet te repareren’ in V3.
Antwoord 10
<div class="d-flex justify-content-start">hello</div>
<div class="d-flex justify-content-end">hello</div>
<div class="d-flex justify-content-center">hello</div>
<div class="d-flex justify-content-between">hello</div>
<div class="d-flex justify-content-around">hello</div>
Plaats de velden die u wilt centreren, rechts of links volgens de bovenstaande indeling.
Antwoord 11
De eenvoudigste oplossing:
Verdeel de navbar
gewoon in kolommen: als u bijvoorbeeld 24 kolommen in totaal heeft, zullen er 12 leeg zijn en zullen 12 de navigatiebalk belemmeren:
<nav class="navbar navbar-default">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-12">
<ul class="nav navbar-nav" align="center">
<li><a href="#">Home</a></li>
<li><a href="#">First Link</a></li>
<li><a href="#">Second Link</a></li>
<li><a href="#">Third Link</a></li>
<li><a href="#">Fourth Link</a></li>
</ul>
</div>
</div>
</nav>