Bootstrap-navigatiebalk met links, gecentreerd of rechts uitgelijnde items

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

Navbar-demo voor Bootstrap 5

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:

voer hier de afbeeldingsbeschrijving in

<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:

center links en overlay logo afbeelding

<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)

Navbar-merk links, links in het midden


centrum voor merk en links, pictogrammen links en rechts

voer hier de afbeeldingsbeschrijving in


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:

voer hier de afbeeldingsbeschrijving in

<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:

voer hier de afbeeldingsbeschrijving in

<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://bootply.com/SGYC6BWeBK

Optie 3 – Zowel merk als links centreren

voer hier de afbeeldingsbeschrijving in

.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.

Voor links uitlijnen
voer hier de afbeeldingsbeschrijving in

class = “navbar-nav mr-auto

Voor rechts uitlijnen
voer hier de afbeeldingsbeschrijving in

class = “navbar-nav ml-auto

Voor gecentreerd uitlijnen
voer hier de afbeeldingsbeschrijving in

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:

voer hier de afbeeldingsbeschrijving in

<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>

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Other episodes