Bootstrap 4 allinea gli elementi della navbar a destra

Come faccio ad allineare un elemento della navbar a destra?

Voglio avere il login e la registrazione a destra. Ma tutto quello che provo non sembra funzionare.

Questo è quello che ho provato finora:

  • <div> intorno al <ul> con l'atributo: style="float: right"
  • <div> intorno al <ul> con l'attributo: style="text-align: right"
  • provato queste due cose sui tag <li>
  • provato di nuovo tutte queste cose con l'aggiunta di !important alla fine
  • cambiato nav-item in nav-right nel <li>
  • aggiunto una classe pull-sm-right al <li>
  • aggiunta una classe align-content-end 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>
Zim
Domanda modificata 20º dicembre 2018 в 9:53
Programmazione
css twitter-bootstrap flexbox bootstrap-4 navbar
6º gennaio 2017 в 8:02
20 visualizzazioni
Soluzione

Bootstrap 4 ha molti modi diversi per allineare gli elementi della navbar. float-right non funzionerà perché la navbar è ora flexbox.

Puoi usare il nuovo mr-auto per il margine destro automatico sulla prima (sinistra) navbar-nav. In alternativa, ml-auto potrebbe essere usato sulla 2a (destra) navbar-nav, o se hai solo una singola navbar-nav.

<div id="app" class="container">


      <span class="navbar-toggler-icon"></span>

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

</div>

http://www.codeply.com/go/P0G393rzfm

Ci sono anche utils per flexbox. In questo caso, hai 2 navbar-nav, quindi justify-content-between in navbar-collapse funzionerebbe per pareggiare lo spazio tra loro,

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

hr> Aggiornamento per Bootstrap 4.0 e successivi

A partire da Bootstrap 4 beta, ml-auto funzionerà ancora per spingere gli elementi a destra. Basta essere consapevoli che le classi navbar-toggleable- sono cambiate in navbar-expand-*.

Aggiornato navbar a destra per Bootstrap 4

hr>

Un altro frequente scenario di allineamento a destra della navbar di Bootstrap 4 include un pulsante a destra che rimane fuori dal mobile collapse nav in modo che sia sempre mostrato a tutte le larghezze.

Pulsante di allineamento a destra che è sempre visibile

[3];

Correlati: https://stackoverflow.com/questions/19733447/bootstrap-navbar-with-left-center-or-right-aligned-items/20362024#20362024

Zim
Risposta modificata 15º agosto 2018 в 1:04
Commentari (7)

Nel mio caso, volevo solo una serie di pulsanti di navigazione / opzioni e ho scoperto che questo 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-end al div e ometterai mr-auto nella lista.

Ecco un esempio funzionante.

Commentari (6)

Sono nuovo di stack overflow e nuovo dello sviluppo front end. Questo è ciò che ha funzionato per me. Quindi non volevo che gli elementi della lista fossero visualizzati.

.hidden {
  display:none;
  } 

 #loginButton{

 margin-right:2px;

 }


    <span class="navbar-toggler-icon"></span>

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

      <a href="#">Log In</a>
      <a href="#">Register</a>

  </div>
Commentari (0)