Bootstrap 4 wyrównaj elementy paska nawigacyjnego do prawej

341

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.

Obraz paska nawigacyjnego

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 !importantdodanym na końcu
  • zmieniony nav-itemna nav-rightw<li>
  • dodał pull-sm-rightklasę do<li>
  • dodał align-content-endklasę 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>
Luuk Wuijster
źródło
Paski nawigacyjne są zbudowane z Flexboksa w wersji alfa 6.
maks.
1
Tak, więc co muszę zrobić, aby wyrównać do prawej. Próbowałem już kilku rzeczy Flexbox bez powodzenia. : /
Luuk Wuijster,

Odpowiedzi:

530

Bootstrap 4 ma wiele różnych sposobów wyrównywania elementów paska nawigacyjnego . float-rightnie będzie działać, ponieważ pasek nawigacyjny jest teraz flexbox.

Możesz użyć mr-autodo automatycznego marginesu po prawej stronie na 1. (lewym) navbar-nav. Alternatywnie , ml-automożna go użyć na drugim (z prawej) navbar-navlub jeśli masz tylko jeden navbar-nav.

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav mr-auto">
            <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="#">Pricing</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>
    </div>
</nav>

https://codeply.com/go/P0G393rzfm

Istnieją również narzędzia Flexbox. W tym przypadku masz 2 navbar-navS, SO justify-content-betweenw navbar-collapsezadziała równomierne przestrzeń między nimi,

 <div class="navbar-collapse collapse justify-content-between">
     <ul class="navbar-nav mr-auto">
               ..
     </ul>
     <ul class="navbar-nav">
           ..
     </ul>
 </div>


Aktualizacja dla Bootstrap 4.0 i nowszych

Począwszy od wersji Bootstrap 4 w wersji beta, ml-autonadal będzie działał, przesuwając przedmioty w prawo. Pamiętaj tylko, że navbar-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

wprowadź opis zdjęcia tutaj

wprowadź opis zdjęcia tutaj


Powiązane: Bootstrap NavBar z wyrównanymi do lewej, środkowej lub prawej pozycji

Zim
źródło
1
mr-autonie działa, jeśli najbardziej odpowiedni element to dropdown. Elementy rozwijane rozlewają się nad prawą krawędzią strony.
Ege Ersoz
6
Działa: codeply.com/go/P0G393rzfm - nie mr-autochodzi 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/...
Zim
2
Możesz również dodać .dropdown-menu-rightdo rozwijanych menu na pasku nawigacyjnym. Niezastosowanie się do tego może odciąć menu rozwijane przy określonych szerokościach.
rybo111
@ZimSystem dziękuję za odpowiedzi. Śledzę swoją odpowiedź tutaj stackoverflow.com/questions/19733447/... . Mam pytanie, jak mogę uzyskać jeden przedmiot po lewej stronie i jeden po prawej stronie?
Lokesh Pandey,
W codeply.com/go/P0G393rzfm pokazałeś jeden ul po lewej i jeden ul po prawej. Osiągnięto to, dodając mr-auto do pierwszego. Ale co jeśli mam tylko jedno ul? Nie chcę tworzyć pustego ul tylko po to, aby wyrównać kolejny z prawej.
Santosh Kumar
140

W moim przypadku chciałem tylko jeden zestaw przycisków / opcji nawigacyjnych i stwierdziłem, że to zadziała:

<div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Sign Out</a>
    </li>
  </ul>
</div>

Więc dodasz justify-content-enddo div i pominiesz mr-autona liście.

Oto działający przykład .

Craig van Tonder
źródło
3
@numediaweb W przykładzie PO używa dwóch elementów w nawigacji, wyrównując jeden w lewo i jeden w prawo; gdzie użyłem tylko jednego i wyrównałem go do prawej. To nie jest właściwa odpowiedź, ale jest pomocna jako odpowiedź na niewielką odmianę pytania;)
Craig van Tonder
Działa to dla pojedynczego navbar-nav, ale mr-autometoda jest używana w dokumentach Bootstrap .
Zim
mr-autojest 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-6
qwaz
Pytanie brzmi: czy próbujesz wyrównać 2 listę linków lub 1. Jeśli tylko 1, twoja odpowiedź działa i była dla mnie bardzo pomocna. Dzięki!
boso-
To działało dla mnie, ale nie wiem, dlaczego powyższa odpowiedź nie działa.
Suhail Akhtar
59

Dla tych, którzy wciąż zmagają się z tym problemem w BS4, po prostu spróbuj poniżej kodu -

<ul class="navbar-nav ml-auto">
Muhammad Tarique
źródło
7
Nie - to wszystko wyrównuje do prawej. Pytanie mówi, że chce wyrównać tylko jeden element po prawej stronie.
NickG
2
Sprawdź oficjalny dokument o m*-autoto wypycha zawartość w lewo lub w prawo w zależności od tego, gdzie można umieścić klasę
Pierre de LESPINAY
@PierredeLESPINAY, tak ml-auto, przesuwa zawartość do skrajnej prawej pozycji, ale zastanawiałem się, dlaczego mr-0nie mogę wykonać tej pracy?
awokado
42

Na Bootstrap 4

Jeśli chcesz wyrównać markę do lewej, a wszystkie elementy paska nawigacyjnego do prawej, zmień wartość domyślną mr-autonaml-auto

<ul class="navbar-nav ml-auto">
geet Sebastian
źródło
32

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-navw prawo za pomocą następującej klasy: ml-md-auto.

ClemC
źródło
1
Pracował dla mnie pięknie. Nic innego nie zrobiło.
Maria Campbell,
14

Użyj ml-autozamiast mr-autopo zastosowaniu navjustify-content-end doul

James Pike
źródło
9

Użyj tego kodu, aby przenieść elementy w prawo.

<div class="collapse navbar-collapse justify-content-end">
Maijied Hasan Shuvo
źródło
1
to nie zadziała, gdy masz zwinięte menu, jednak z ml-auto będzie nadal działać, ponieważ gdy menu jest zwinięte, elementy <li> nadal zajmują 100% szerokości, więc margines nie zostanie zastosowany.
Ryan S,
8

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:

<div class="collapse navbar-collapse justify-content-between">
<ul>....</ul>
<ul>...</ul>
</div>
J Kennedy
źródło
7

Po prostu dodaj mr-autozajęcia na ul:

<ul class="nav navbar-nav mr-auto">

Jeśli masz listę menu po obu stronach, możesz zrobić coś takiego:

<ul class="navbar-nav mr-auto">
  <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="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>
<ul class="navbar-nav ml-auto">
  <li class="nav-item active">
    <a class="nav-link" href="#">left 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">left 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">left disable</a>
  </li>
</ul>
SKL
źródło
5

użyj klasy flex-row-reverse

<nav class="navbar navbar-toggleable-md navbar-light">
    <div class="container">
        <button class="navbar-toggler navbar-toggler-right" 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>
        <a class="navbar-brand" href="#">
            <i class="fa fa-hospital-o fa-2x" aria-hidden="true"></i>
        </a>
        <div class="collapse navbar-collapse flex-row-reverse" id="navbarNavAltMarkup">
            <ul class="navbar-nav">
                <li><a class="nav-item nav-link active" href="#" style="background-color:#666">Home <span class="sr-only">(current)</span></a</li>
                <li><a class="nav-item nav-link" href="#">Doctors</a></li>
                <li><a class="nav-item nav-link" href="#">Specialists</a></li>
                <li><a class="nav-item nav-link" href="#">About</a></li>
            </ul>
        </div>
    </div>
</nav>
mubsher
źródło
2

Niewielka zmiana w boostrap 4. Aby wyrównać pasek nawigacyjny do prawej strony, musisz wprowadzić tylko dwie zmiany. oni są:

  1. w navbar-navklasie dodatku w-100tak navbar-nav w-100, aby szerokość jako 100
  2. w nav-item dropdownklasie dodatku ml-autotak nav-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

wprowadź opis zdjęcia tutaj

Pełny kod źródłowy

<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="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav w-100">
      <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="#">Pricing</a>
      </li>
      <li class="nav-item dropdown ml-auto">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>  
  </div>
</nav>
Anand Raja
źródło
2

W przypadku bootstrap 4.3.1 używałem tabletek nawigacyjnych i nic nie działało dla mnie oprócz tego:

    <ul class="nav nav-pills justify-content-end ml-auto">
    <li ....</li>
    </ul>
Ajay Kumar
źródło
2

W bootstrap v4.3 po prostu dodaj ml-autow <ul class="navbar-nav"> Ex:<ul class="navbar-nav ml-auto">

Mohit Prajapati
źródło
0

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

<div id="header" class="header">
  <nav class="navbar navbar-toggleable-sm navbar-inverse bg-faded fixed-top">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
    <a class="navbar-brand" href="#">
          <img alt='Brand' src='../assets/images/logo-white.png' class='navbar-logo-img d-inline-block align-top '>
          <span class="navbar-logo-text">Oncoscape</span>
        </a>
    <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
      <ul class="navbar-nav float-left">
        <a class="navbar-items nav-item nav-link active " *ngIf='authenticated' (click)='goDashboard()'>
          <span class="fa fa-dashboard"></span>Dashboard
        </a>
        <a class="nav-item nav-link navbar-items active" href="http://resources.sttrcancer.org/oncoscape-contact">
          <span class="fa fa-comments"></span>Feedback
        </a>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <img *ngIf='user && authenticated'  class="navbar-pic" src={{user.thumbnail}} alt="Smiley face">
          </a>
          <div *ngIf='user && authenticated' class="dropdown-menu " aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" (click)="toProfile()">Account</a>
            <div class="dropdown-item">
              <app-login></app-login>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</div>
<router-outlet></router-outlet>
GrettyGoose
źródło
0

W przypadku Bootstrap 4 beta przykładowy pasek nawigacyjny z elementami wyrównanymi do prawej strony to:

<div id="app" class="container">
  <nav class="navbar navbar-expand-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 mr-auto">
      <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>
</div>
Kaczor
źródło
0

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.

<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 mr-auto">
      <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>

inne miejsca docelowe mogą obejmować

fixed- top
    fixed bottom
    sticky-top
maro
źródło
0

Przykład roboczy dla BS v4.0.0-beta.2:

<body>
    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" 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>

      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav mr-auto">
          <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="#">Login</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Register</a>
          </li>
        </ul>
      </div>
    </nav>


    <div class="container-fluid">
      container content
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  </body>
belgoros
źródło
0

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.

Dominic Davies
źródło
-1

Znajdź wiersz 69 w verndor-prefixes.less i napisz go:

.panel {
    margin-bottom: 20px;
    height: 100px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}

Paweł
źródło
-2

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

<div class="d-none d-xl-block col-xl-2 bd-toc float-md-right">
    <ul class="section-nav">
         <li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
         <li class="toc-entry toc-h2"><a href="#classes">Classes</a></li>
         <li class="toc-entry toc-h2"><a href="#mixins">Mixins</a></li>
         <li class="toc-entry toc-h2"><a href="#responsive">Responsive</a></li>
    </ul>
</div> 
Gary Molton
źródło
-3

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.

.hidden {
  display:none;
  } 
  
 #loginButton{
 
 margin-right:2px;
 
 }
<nav class="navbar navbar-toggleable-md navbar-light bg-faded fixed-top">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">NavBar</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active hidden">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item hidden">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item hidden">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="loginButton"><a href="#">Log In</a></button>
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit"><a href="#">Register</a></button>
    </form>
  </div>
</nav>

MSangha
źródło