Bootstrap 4 allinea gli elementi della barra di navigazione a destra

341

Come allineare un elemento della barra di navigazione a destra?

Voglio avere il login e registrarmi a destra. Ma tutto ciò che provo non sembra funzionare.

Questo è quello che ho provato finora:

<div>intorno al <ul>con l'attributo:style="float: right"
<div>intorno al <ul>con l'attributo:style="text-align: right"
ho provato queste due cose sui <li>tag
ho provato di nuovo tutte queste cose con l' !importantaggiunta alla fine
modificato nav-itemin nav-rightin<li>
ha aggiunto una pull-sm-rightclasse al<li>
ha aggiunto una align-content-endclasse al<li>

Questo è il mio codice:

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

Le navbar sono costruite con flexbox dalla versione alpha 6.

— massimo

1

Sì, quindi cosa devo fare per farlo allineare a destra. Ho già provato un paio di cose con la flexbox senza fortuna. : /

— Luuk Wuijster

532

Bootstrap 4 ha molti modi diversi per allineare gli elementi della barra di navigazione . float-rightnon funzionerà perché la barra di navigazione è adesso flexbox.

È possibile utilizzare mr-autoper il margine destro automatico al 1 ° (a sinistra) navbar-nav. In alternativa , ml-autopuò essere utilizzato al 2 ° (a destra) navbar-navo se ne hai solo uno 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

Ci sono anche programmi di utilità flexbox. In questo caso, si hanno 2 navbar-navs, così justify-content-betweennel navbar-collapsefunzionerebbe lo anche lo spazio tra di loro,

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

Aggiornamento per Bootstrap 4.0 e versioni successive

A partire da Bootstrap 4 beta, ml-autofunzionerà comunque per spingere gli oggetti a destra. Basta essere consapevoli che le navbar-toggleable-classi sono cambiate innavbar-expand-*

Barra di navigazione aggiornata a destra per Bootstrap 4

Un altro frequente scenario di allineamento a destra di Bootstrap 4 Navbar include un pulsante sulla destra che rimane al di fuori del nav di compressione mobile in modo che sia sempre mostrato a tutte le larghezze.

Pulsante di allineamento a destra sempre visibile

Correlati: Bootstrap NavBar con elementi allineati a sinistra, al centro o a destra

— Zim
fonte

1

mr-autonon funziona se l'elemento più a destra è a dropdown. Gli elementi a discesa si estendono sul bordo destro della pagina.

— Ege Ersoz,

6

Funziona: codeply.com/go/P0G393rzfm - il problema non è in mr-autoquanto la domanda riguarda l'allineamento a destra che funziona. Pubblica una nuova domanda se hai dubbi sul menu a discesa, ma molto probabilmente ti riferisci a questo problema: stackoverflow.com/questions/43867258/…

— Zim

2

Puoi anche aggiungere i .dropdown-menu-rightmenu a discesa allineati a destra nella barra di navigazione. Non farlo può interrompere il menu a discesa a determinate larghezze.

— Rybo111,

@ZimSystem grazie per le tue risposte. Ho seguito la tua risposta qui stackoverflow.com/questions/19733447/… . Ho una domanda: come posso ottenere un oggetto sul lato sinistro e un oggetto sul lato destro?

— Lokesh Pandey,

In codeply.com/go/P0G393rzfm , hai mostrato uno ul a sinistra e uno ul a destra. Ciò è stato ottenuto aggiungendo mr-auto al primo. E se avessi solo un ul? Non voglio creare un ul vuoto solo per allinearne un altro a destra.

— Santosh Kumar

140

Nel mio caso, volevo solo un set di pulsanti / opzioni di navigazione e ho scoperto che funzionerà:

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

Quindi, aggiungerai justify-content-endal div e ometterai mr-autonell'elenco.

Ecco un esempio funzionante .

— Craig van Tonder
fonte

3

@numediaweb Nell'esempio dei PO, usa due elementi all'interno del nav, allineando uno a sinistra e uno a destra; dove ne ho usato solo uno e l'ho allineato a destra. Non è la risposta giusta, ma è utile come risposta a una leggera variazione della domanda;)

— Craig van Tonder

Funziona per un singolo navbar-nav, ma il mr-autometodo è usato nei documenti Bootstrap .

— Zim,

mr-autoviene utilizzato nei documenti, ma non per allineare gli elementi a sinistra. Questa risposta è semanticamente corretta come menzionato in questo articolo: blog.getbootstrap.com/2017/01/06/bootstrap-4-alpha-6

— qwaz

La domanda è: stai cercando di allineare 2 elenchi di link o 1. Se solo 1, la tua risposta funziona ed è stata molto utile per me. Grazie!

— barefootsanders,

Ha funzionato per me, ma non so perché quello sopra questa risposta non funzioni.

— Suhail Akhtar,

59

Per coloro che stanno ancora lottando con questo problema in BS4, prova semplicemente sotto il codice -

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

— Muhammad Tarique
fonte

7

No: allinea tutto a destra. La domanda dice che vuole solo allineare un singolo oggetto a destra.

— NickG

2

Controlla il documento ufficiale a riguardo m*-autoche spinge il contenuto a sinistra oa destra a seconda di dove hai inserito la lezione

— Pierre de LESPINAY,

@PierredeLESPINAY, sì ml-auto, spinge i contenuti nella posizione più a destra, ma mi chiedevo solo perché mr-0non riesco a fare il lavoro?

— avocado,

42

Su Bootstrap 4

Se vuoi allineare il marchio a sinistra e tutti gli elementi della barra di navigazione a destra, modifica l'impostazione predefinita mr-autoinml-auto

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

— geet Sebastian
fonte

32

Su Bootsrap 4.0.0-beta.2, nessuna delle risposte elencate qui ha funzionato per me. Infine, il sito Bootstrap mi ha dato la soluzione, non tramite il suo documento ma tramite il suo codice sorgente della pagina ...

Getbootstrap.com Allinea il loro diritto navbar-nava destra con l'aiuto della seguente classe: ml-md-auto.

— Clemc
fonte

1

Ha funzionato magnificamente per me. Nient'altro ha fatto.

— Maria Campbell,

14

Utilizzare ml-autoinvece di mr-autodopo aver applicato una navgiustificazione-content-end al fileul

— James Pike
fonte

9

Usa questo codice per spostare gli oggetti a destra.

<div class="collapse navbar-collapse justify-content-end">

— Maijied Hasan Shuvo
fonte

1

che non funzionerà quando si dispone di un menu compresso, tuttavia, con ml-auto funzionerà comunque perché quando il menu viene compresso, gli elementi <li> occupano ancora il 100% della larghezza, quindi non verrà applicato alcun margine.

— Ryan S,

8

Se vuoi Home, Funzionalità e Prezzi a sinistra subito dopo il tuo nav-brand, quindi accedi e registrati a destra quindi avvolgi i due elenchi <div>e usa .justify-content-between:

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

— J Kennedy
fonte

7

Aggiungi mr-autolezione a ul:

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

Se hai un elenco di menu su entrambi i lati puoi fare qualcosa del genere:

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

5

usa la classe 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
fonte

2

È un piccolo cambiamento in boostrap 4. Per allineare la barra di navigazione sul lato destro, devi fare solo due modifiche. loro sono:

in navbar-navclasse aggiungere w-100come navbar-nav w-100per rendere larghezza come 100
in nav-item dropdownclasse aggiungere ml-autocome nav-item dropdown ml-autoper rendere il margine lasciato come automatico.

Se non hai capito, fai riferimento all'immagine che ho allegato a questo.

Collegamento CodePen

Codice sorgente completo

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

2

Per bootstrap 4.3.1, stavo usando nav-pills e niente ha funzionato per me tranne questo:

    <ul class="nav nav-pills justify-content-end ml-auto">
    <li ....</li>
    </ul>

— Ajay Kumar
fonte

2

In bootstrap v4.3 basta aggiungere ml-autoin <ul class="navbar-nav"> Ex:<ul class="navbar-nav ml-auto">

— Mohit Prajapati
fonte

0

Sto eseguendo Angular 4 (v.4.0.0) e ng-bootstrap (Bootstrap 4). Questo codice non sarà rilevante, ma spero che le persone possano scegliere ciò che funziona. Mi ci è voluto un po 'di tempo per trovare una soluzione per convincere i miei articoli a giustificare correttamente, comprimere correttamente e implementare un menu a discesa dalla mia immagine del profilo di Google (usando 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
fonte

0

Per Bootstrap 4 beta, la barra di navigazione di esempio con elementi allineati sul lato destro è:

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

0

L'uso della scatola flessibile bootstrap ci aiuta a controllare il posizionamento e l'allineamento del tuo elemento di navigazione. per il problema sopra riportato l'aggiunta di mr-auto è una soluzione migliore ad esso.

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

altro posizionamento può includere

fixed- top
    fixed bottom
    sticky-top

— maro
fonte

0

L'esempio funzionante per 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
fonte

0

Se tutto quanto sopra fallisce, ho aggiunto il 100% di larghezza alla classe navbar in CSS. Fino ad allora il signor auto non funzionava per me su questo progetto usando 4.1.

— Dominic Davies
fonte

-1

Trova la riga 69 in verndor-prefixes.less e scrivila come segue:

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

Espandi frammento

— Paolo
fonte

-2

Ho appena copiato questo da una delle pagine getbootstrap per la versione 4 rilasciata che ha funzionato molto meglio di quanto sopra

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

-3

Sono nuovo nello stack di overflow e nuovo nello sviluppo del front-end. Questo è ciò che ha funzionato per me. Quindi non volevo visualizzare gli elementi dell'elenco.

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