Pasek startowy NavBar z elementami wyrównanymi do lewej, środkowej lub prawej strony


437

W Bootstrap , co jest najbardziej przyjaznym dla platformy sposób utworzyć pasek nawigacyjny, który ma logo po lewej stronie, pozycji menu w centrum, oraz logo B po prawej stronie?

Oto, co próbowałem do tej pory, i ostatecznie jest wyrównywany, tak aby logo A było po lewej stronie, pozycje menu obok logo po lewej stronie i logo B po prawej stronie.

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

Odpowiedzi:


800

Aktualizacja 2019

Bootstrap 4

Teraz, gdy Bootstrap 4 ma Flexbox, wyrównanie paska nawigacyjnego jest znacznie łatwiejsze. Oto zaktualizowane przykłady lewej , prawej i środkowej części paska nawigacyjnego Bootstrap 4 oraz wiele innych scenariuszy wyrównania pokazanych tutaj .

Schematu flexbox , auto-marże i zamawianie klasy narzędzie może być wykorzystywane w celu dostosowania zawartości NavBar ile potrzeba. Jest wiele rzeczy do rozważenia, w tym kolejność i wyrównanie elementów paska nawigacyjnego (marka, linki, przełącznik) zarówno na dużych ekranach, jak i widokach mobilnych / zwiniętych. Nie używaj klas siatki (wiersz, kolumna) dla paska nawigacyjnego .

Oto różne przykłady ...

Lewy, środkowy (marka) i prawy link:

wprowadź opis zdjęcia tutaj

<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


Kolejna opcja paska nawigacyjnego BS4 z linkami środkowymi i obrazem logo nakładki :

środkowe linki i obraz logo nakładki

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


Lub te inne scenariusze wyrównania Bootstrap 4:

marka po lewej, martwe linki, (puste po prawej)

Marka paska nawigacyjnego po lewej, martwe linki


centrum marki i linków, ikony po lewej i prawej stronie

wprowadź opis zdjęcia tutaj


Więcej przykładów Bootstrap 4 :

przełącz na lewo na telefonie komórkowym, marka po prawej stronie
marki i linki na telefonie po
prawej stronie wyrównaj linki na komputerze, wyśrodkuj linki na telefonie po
lewej stronie linki i przełącz, po środku marki, szukaj po prawej


Zobacz także: Bootstrap 4 wyrównaj elementy paska nawigacyjnego w prawo
Pasek nawigacyjny Bootstrap 4 wyrównaj do przycisku, który nie zwija się w urządzeniu mobilnym
Wyśrodkuj element w pasku nawigacyjnym Bootstrap 4


Bootstrap 3

Opcja 1 - Centrum marki z linkami nawigacji w lewo / w prawo:

wprowadź opis zdjęcia tutaj

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


Opcja 2 - Lewy, środkowy i prawy link nawigacyjny:

wprowadź opis zdjęcia tutaj

<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

Opcja 3 - wyśrodkuj markę i linki

wprowadź opis zdjęcia tutaj

.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

Więcej przykładów:

Lewa marka, środkowe linki
Lewy przełącznik, środkowa marka

W wersji 3.x patrz także uzasadnienie nawigacji: środkowy pasek nawigacyjny Bootstrap


Wyśrodkuj pasek nawigacyjny w Bootstrap Bootstrap 4 wyrównaj elementy paska nawigacyjnego w
prawo


1
jak sprawić, by lewe elementy zwinęły się w innym przełączniku po lewej stronie?
gepex

1
Stworzyłem przykład 2 jsfiddle, ponieważ bootply nie działa teraz. zol 1 i zol 2 . btw, soluzion 2 działa lepiej (
imho

W przypadku Bootstrap 4 w przeglądarce Firefox przykład nr 1 nie działa. Dodanie .absklasy powoduje, że navbar-brandelement zakrywa przyciski po lewej i prawej stronie, przez co nie można ich połączyć
8bithero

1
Jak to nie jest oznaczone jako odpowiedź? Daje 3 opcje dla BS 3 i 4, dziękuję, proszę pana.
Murkantilism

Żaden z twoich szyfrujących linków się nie otwiera i to z powodu okropnego projektu zastosowanego na tej stronie. Łączą ze sobą wszelkiego rodzaju reklamy, grafQL ... i jeśli nie uda się załadować lub zablokować, cały ekran będzie pusty. tak, w ten sposób działa kąt (lub NIE działa).
AaA

58

Bootstrap 4

Istnieje wiele sposobów wyrównywania elementów navBars.

Dla Left Align wprowadź opis zdjęcia tutaj

class = "navbar-nav mr-auto "

Dla wyrównania do prawej wprowadź opis zdjęcia tutaj

class = "navbar-nav ml-auto "

Do wyrównywania do środka wprowadź opis zdjęcia tutaj

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>

1
dodanie class = "navbar-brand mx-auto" w tagu b-nav-item zrobiło dla mnie lewę
Sheece Gardazi

36

Potrzebowałem czegoś podobnego (elementy wyrównane do lewej, środkowej i prawej), ale z możliwością oznaczenia elementów wyśrodkowanych jako aktywne. Dla mnie zadziałało:

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

1
Jest to dość bliskie, ale pęka, gdy go zwiniesz. Jeśli wyświetlisz go na urządzeniu mobilnym, pod paskiem menu pojawi się „Marka”. Czy Brand nie jest częścią faktycznego Nav?
spasticninja

1
To dokładniej odpowiada PO.
Roger Dueck

Do tej pory działało to dla mnie. Nie mam marki ani elementu wyrównanego do prawej, tylko 3 wyśrodkowane opcje. Dzięki
Alessandro,

Myślę, że to rozwiązanie działa lepiej niż najczęściej głosowana odpowiedź, ponieważ przy zmniejszaniu rozmiaru ekranu żaden z elementów nie zwisa z paska nawigacyjnego (przynajmniej we wspólnym przykładowym kodzie)
pravin

26

Bootstrap 4 (od wersji alfa 6)

Paski nawigacyjne są zbudowane z Flexboksa! Zamiast liczb zmiennoprzecinkowych potrzebujesz narzędzi typu flexbox i marginesów.

Aby użyć Align Right justify-content-endna collapsediv:

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

Pełny przykład tutaj: https://jsbin.com/kemawa/edit?output


3
Nie działa dla mnie ... justify-content-end wydaje się mieć zastosowanie do nav i wydaje się nie działać dla navbar to najnowsza wersja bootstrap.
Stephane Paquet

1
@stephanePaquet, dotyczy to wersji alfa 6 (najnowszej wersji bootstrap) - z czego korzystasz?
Jeremy Lynch

11

Uderz mnie w głowę, ponownie przeczytaj moją odpowiedź i zdałem sobie sprawę, że OP poprosił o dwa logo po jednym z lewej po prawej z centralnym menu, a nie na odwrót.

Można tego dokonać ściśle w kodzie HTML, używając logo „navbar-right” i „navbar-left” Bootstrap dla logo, a następnie „just-nav-justation” zamiast „navbar-nav” dla twojego UL. Dodatkowy CSS nie jest wymagany (chyba że chcesz umieścić przełącznik zwinięcia paska nawigacyjnego pośrodku w rzutni xs, musisz nieco przesłonić, ale pozostawi to tobie).

<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="http://placehold.it/150x30"></a></div>

  </div>
  <div class="navbar-brand navbar-right"><a href="#"><img src="http://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


Dla tych, którzy przybyli tutaj, próbując wyśrodkować „markę”, oto moja stara odpowiedź:

Wiem, że ten wątek jest trochę stary, ale po to, aby opublikować moje odkrycia podczas pracy nad tym. Postanowiłem oprzeć moje rozwiązanie na odpowiedzi Skelly'ego, odkąd Tomaszbak załamał się na collaspe. Najpierw stworzyłem „centrum paska nawigacyjnego” i wyłączyłem float dla normalnego paska nawigacyjnego w moim CSS:

.navbar-center
{
   position: absolute;
   width: 100%;
   left: 0;
   text-align: center;
   margin: auto;
}

.navbar-brand{
   float:none;
}

Jednak problem z odpowiedzią Skelly polega na tym, że jeśli masz naprawdę długą nazwę marki (lub chciałeś użyć obrazu swojej marki), to po przejściu do okna podglądu sm może się nakładać ze względu na absolutną pozycję i ponieważ komentatorzy mają powiedział, kiedy dojdziesz do rzutni xs, przełącznik przestanie działać (chyba że użyjesz pozycjonowania Z, ale tak naprawdę nie chciałem się tym martwić).

Więc wykorzystałem narzędzia responsywne bootstrap do stworzenia wielu wersji bloku marki:

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

Więc teraz rzutnie lg i md mają markę wyśrodkowaną z linkami po lewej i prawej stronie, kiedy dojdziesz do rzutni sm, twoje linki spadną do następnej linii, abyś nie nakładał się na twoją markę, a potem w końcu na xs rzutnia uruchamia się collaspe i możesz użyć przełącznika. Możesz pójść o krok dalej i zmodyfikować zapytania dotyczące multimediów dla paska nawigacyjnego z prawej i paska nawigacyjnego z lewej, gdy jest używany z marką navbar, aby w okienku podglądu sm wszystkie były wyśrodkowane, ale nie miały czasu na sprawdzenie.

Możesz sprawdzić mój stary bootply tutaj: www.bootply.com/n3PXXropP3

Wydaje mi się, że posiadanie 3 marek może być tak samo kłopotliwe jak „z”, ale wydaje mi się, że w świecie responsywnego projektowania to rozwiązanie lepiej pasuje do mojego stylu.


1

Odkryłem, że poniższe rozwiązanie jest lepszym rozwiązaniem w zależności od zawartości twoich lewej, środkowej i prawej pozycji. Szerokość 100% bez marginesu powodowała nakładanie się div i uniemożliwiała poprawne działanie tagów zakotwiczenia - bez bałaganu przy użyciu indeksów Z.

.navbar-brand
{
    position: absolute;
    width: 100%;
    left: 0;
    margin: auto;
    margin-left: 48%;
}

1

To jest przestarzałe pytanie, ale znalazłem alternatywne rozwiązanie do udostępnienia bezpośrednio ze strony github bootstrap. Dokumentacja nie została zaktualizowana i istnieją inne pytania dotyczące SO, proszące o to samo rozwiązanie, choć nieco inne pytania. To rozwiązanie nie jest specyficzne dla twojego przypadku, ale jak widać rozwiązanie jest <div class="container">zaraz po nim, <nav class="navbar navbar-default navbar-fixed-top">ale można je również zastąpić <div class="container-fluid"w razie potrzeby.

<!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">Créer un compte</button>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</body>

</html>

Rozwiązanie znaleziono w skrzypcach na tej stronie: https://github.com/twbs/bootstrap/issues/18362

i jest wymieniony jako nie naprawiający się w V3.


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

Umieść pola, które chcesz wyśrodkować, w prawo lub w lewo zgodnie z powyższym podziałem.


1

Ustaw lewy margines na auto -> ml-auto w sekcji, którą chcesz przesunąć w prawo.

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


-2

Najprostsze rozwiązanie:

Po prostu podziel navbarkolumny na: jeśli na przykład masz 24 kolumny, 12 będzie pustych, a 12 będzie ograniczać pasek nawigacji:

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

1
Wiersz siatki i kolumna nie powinny być używane wewnątrz paska nawigacyjnego. Użyj obsługiwanej zawartości .
Zim

@Zim Dlaczego nie, co jest w tym tak złego?
parsecer
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.