Jak wyrównać element paska nawigacyjnego do prawej?
Chcę mieć login i zarejestrować się po prawej stronie. Ale wszystko, co próbuję, nie działa.
Do tej pory próbowałem:
<div>
wokół<ul>
z atrybutem:style="float: right"
<div>
wokół<ul>
z atrybutem:style="text-align: right"
- wypróbowałem te dwie rzeczy na
<li>
tagach - próbowałem tych wszystkich rzeczy jeszcze raz z
!important
dodanym na końcu - zmieniony
nav-item
nanav-right
w<li>
- dodał
pull-sm-right
klasę do<li>
- dodał
align-content-end
klasę do<li>
To jest mój kod:
<div id="app" class="container">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricingg</a>
</li>
</ul>
<ul class="navbar-nav " >
<li class="nav-item">
<a class="nav-link" href="{{ url('/login') }}">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url('/register') }}">Register</a>
</li>
</ul>
</nav>
@yield('content')
</div>
css
twitter-bootstrap
flexbox
bootstrap-4
navbar
Luuk Wuijster
źródło
źródło
Odpowiedzi:
Bootstrap 4 ma wiele różnych sposobów wyrównywania elementów paska nawigacyjnego .
float-right
nie będzie działać, ponieważ pasek nawigacyjny jest terazflexbox
.Możesz użyć
mr-auto
do automatycznego marginesu po prawej stronie na 1. (lewym)navbar-nav
. Alternatywnie ,ml-auto
można go użyć na drugim (z prawej)navbar-nav
lub jeśli masz tylko jedennavbar-nav
.https://codeply.com/go/P0G393rzfm
Istnieją również narzędzia Flexbox. W tym przypadku masz 2
navbar-nav
S, SOjustify-content-between
wnavbar-collapse
zadziała równomierne przestrzeń między nimi,Aktualizacja dla Bootstrap 4.0 i nowszych
Począwszy od wersji Bootstrap 4 w wersji beta,
ml-auto
nadal będzie działał, przesuwając przedmioty w prawo. Pamiętaj tylko, żenavbar-toggleable-
klasy się zmieniłynavbar-expand-*
Zaktualizowano pasek nawigacyjny w prawo dla Bootstrap 4
Innym częstym scenariuszem wyrównania paska nawigacyjnego Bootstrap 4 do prawej jest przycisk po prawej stronie, który pozostaje poza mobilną nawigacją zwijania, dzięki czemu jest zawsze wyświetlany na wszystkich szerokościach.
Przycisk wyrównywania w prawo, który jest zawsze widoczny
Powiązane: Bootstrap NavBar z wyrównanymi do lewej, środkowej lub prawej pozycji
źródło
mr-auto
nie działa, jeśli najbardziej odpowiedni element todropdown
. Elementy rozwijane rozlewają się nad prawą krawędzią strony.mr-auto
chodzi o to, że chodzi o wyrównanie prawa, które działa. Opublikuj nowe pytanie, jeśli masz obawy związane z rozwijanym menu, ale najprawdopodobniej odnosisz się do tego problemu: stackoverflow.com/questions/43867258/....dropdown-menu-right
do rozwijanych menu na pasku nawigacyjnym. Niezastosowanie się do tego może odciąć menu rozwijane przy określonych szerokościach.W moim przypadku chciałem tylko jeden zestaw przycisków / opcji nawigacyjnych i stwierdziłem, że to zadziała:
Więc dodasz
justify-content-end
do div i pominieszmr-auto
na liście.Oto działający przykład .
źródło
mr-auto
metoda jest używana w dokumentach Bootstrap .mr-auto
jest używany w dokumentach, ale nie do wyrównywania elementów do lewej. Ta odpowiedź jest semantycznie poprawna, jak wspomniano w tym artykule: blog.getbootstrap.com/2017/01/06/bootstrap-4-alpha-6Dla tych, którzy wciąż zmagają się z tym problemem w BS4, po prostu spróbuj poniżej kodu -
źródło
m*-auto
to wypycha zawartość w lewo lub w prawo w zależności od tego, gdzie można umieścić klasęml-auto
, przesuwa zawartość do skrajnej prawej pozycji, ale zastanawiałem się, dlaczegomr-0
nie mogę wykonać tej pracy?Na Bootstrap 4
Jeśli chcesz wyrównać markę do lewej, a wszystkie elementy paska nawigacyjnego do prawej, zmień wartość domyślną
mr-auto
naml-auto
źródło
Na
Bootsrap 4.0.0-beta.2
, żadna z wymienionych tutaj odpowiedzi nie działała dla mnie. Wreszcie witryna Bootstrap dała mi rozwiązanie, nie poprzez dokument, ale poprzez kod źródłowy strony ...Getbootstrap.com dostosować swoje prawo
navbar-nav
w prawo za pomocą następującej klasy:ml-md-auto
.źródło
Użyj
ml-auto
zamiastmr-auto
po zastosowaniunav
justify-content-end doul
źródło
Użyj tego kodu, aby przenieść elementy w prawo.
źródło
Jeśli chcesz Strona główna, Funkcje i Ceny po lewej stronie zaraz po
nav-brand
, a następnie zaloguj się i zarejestruj po prawej, a następnie zawiń dwie listy<div>
i użyj.justify-content-between
:źródło
Po prostu dodaj
mr-auto
zajęcia naul
:Jeśli masz listę menu po obu stronach, możesz zrobić coś takiego:
źródło
użyj klasy flex-row-reverse
źródło
Niewielka zmiana w boostrap 4. Aby wyrównać pasek nawigacyjny do prawej strony, musisz wprowadzić tylko dwie zmiany. oni są:
navbar-nav
klasie dodatkuw-100
taknavbar-nav w-100
, aby szerokość jako 100nav-item dropdown
klasie dodatkuml-auto
taknav-item dropdown ml-auto
, aby lewy margines jako auto.Jeśli nie rozumiesz, zapoznaj się z obrazem, który do niego załączyłem.
Link CodePen
Pełny kod źródłowy
źródło
W przypadku bootstrap 4.3.1 używałem tabletek nawigacyjnych i nic nie działało dla mnie oprócz tego:
źródło
W bootstrap v4.3 po prostu dodaj
ml-auto
w<ul class="navbar-nav">
Ex:<ul class="navbar-nav ml-auto">
źródło
Korzystam z Angulara 4 (wer. 4.0.0) i ng-bootstrap (Bootstrap 4). Ten kod nie będzie odpowiedni, ale mam nadzieję, że ludzie będą mogli wybrać to, co działa. Zajęło mi trochę czasu znalezienie rozwiązania, które pozwoliłoby mi odpowiednio uzasadnić, odpowiednio zwinąć i wdrożyć menu rozwijane mojego profilu google (przy użyciu OAuth).
źródło
W przypadku Bootstrap 4 beta przykładowy pasek nawigacyjny z elementami wyrównanymi do prawej strony to:
źródło
Korzystanie z modułu Flex Bootstrap pomaga nam kontrolować umiejscowienie i wyrównanie elementu nawigacyjnego. dla powyższego problemu lepszym rozwiązaniem jest dodanie mr-auto.
inne miejsca docelowe mogą obejmować
źródło
Przykład roboczy dla BS
v4.0.0-beta.2
:źródło
Jeśli wszystko powyżej się nie powiedzie, dodałem 100% szerokości do klasy paska nawigacyjnego w CSS. Do tego czasu mr auto nie pracował dla mnie przy tym projekcie przy użyciu 4.1.
źródło
Znajdź wiersz 69 w verndor-prefixes.less i napisz go:
źródło
Właśnie skopiowałem to z jednej ze stron getbootstrap dla wydanej wersji 4, która działała znacznie lepiej niż wyżej
źródło
Jestem nowy w stosach przepełnienia i nowy w rozwoju front-endu. To działało dla mnie. Nie chciałem więc, aby elementy listy były wyświetlane.
źródło