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:
<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 :
<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)
centrum marki i linków, ikony po lewej i prawej stronie
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:
<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:
<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
.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
.abs
klasy powoduje, żenavbar-brand
element zakrywa przyciski po lewej i prawej stronie, przez co nie można ich połączyćBootstrap 4
Istnieje wiele sposobów wyrównywania elementów navBars.
Dla Left Align
Dla wyrównania do prawej
Do wyrównywania do środka
źródło
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
CSS:
źródło
Bootstrap 4 (od wersji alfa 6)
Aby użyć Align Right
justify-content-end
nacollapse
div:Pełny przykład tutaj: https://jsbin.com/kemawa/edit?output
źródło
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).
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:
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:
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.
źródło
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.
źródło
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.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.
źródło
Umieść pola, które chcesz wyśrodkować, w prawo lub w lewo zgodnie z powyższym podziałem.
źródło
Ustaw lewy margines na auto -> ml-auto w sekcji, którą chcesz przesunąć w prawo.
źródło
Najprostsze rozwiązanie:
Po prostu podziel
navbar
kolumny na: jeśli na przykład masz 24 kolumny, 12 będzie pustych, a 12 będzie ograniczać pasek nawigacji:źródło