Bootstrap 4 allinea gli elementi della barra di navigazione a destra

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.

Immagine di Navbar

Questo è quello che ho provato finora:

  • attorno a

      con l’attributo: style="float: right"
    • attorno a

        con l’attributo: style="text-align: right"
      • provato queste due cose sui tag
      • provato di nuovo tutte queste cose con !important aggiunto alla fine
      • cambiato nav-item in nav-right nel
      • aggiunta una class pull-sm-right al
      • aggiunta una class align-content-end a

      Questo è il mio codice:

        

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

      Puoi utilizzare il nuovo mr-auto per il margine destro automatico sul 1 ° (a sinistra) navbar-nav . In alternativa , ml-auto potrebbe essere utilizzato sul 2 ° (a destra) navbar-nav , o se hai solo un singolo navbar-nav .

        

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

      Esistono anche programmi di utilità Flexbox. In questo caso, hai 2 navbar-nav s, quindi justify-content-between in navbar-collapse funzionerebbe anche lo spazio tra di loro,

         

      Aggiornamento per Bootstrap 4.0 e successivi

      A partire da Bootstrap 4 beta, ml-auto continuerà a funzionare per spingere gli oggetti a destra. navbar-toggleable- classi di navbar-toggleable- della navbar-toggleable- sono state modificate in navbar-expand-*

      Aggiornata la barra di navigazione a destra per Bootstrap 4


      Un altro frequente scenario di allineamento a destra di Bootstrap 4 Navbar include un pulsante a destra che rimane all’esterno del nav mobile crollo in modo che venga sempre visualizzato a tutte le larghezze.

      Pulsante di allineamento a destra che è sempre visibile

      inserisci la descrizione dell'immagine qui

      inserisci la descrizione dell'immagine qui


      Correlato: BootBar NavBar con elementi allineati a sinistra, al centro o a destra

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

        

      Quindi, aggiungerai justify-content-end al div e ometti mr-auto sulla lista.

      Ecco un esempio funzionante .

      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 doc ma tramite il suo codice sorgente della pagina …

      Getbootstrap.com allinea il loro navbar-nav destra a destra con l’aiuto della seguente class: ml-md-auto .

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

        

      Su Bootstrap 4

      Se vuoi allineare la marca alla tua sinistra e tutti gli elementi della barra di navigazione a destra, cambia l’impostazione predefinita mr-auto in ml-auto

        

      Usa ml-auto invece di mr-auto dopo aver applicato nav justify-content-end a ul

      usa la class flex-row-reverse

        

      Se vuoi casa, funzionalità e prezzi a sinistra subito dopo il tuo nav-brand , quindi accedi e registrati a destra, quindi avvolgi i due elenchi in

      e usa .justify-content-between :

        

      Basta aggiungere la class mr-auto a ul

        

      Se hai una lista di menu su entrambi i lati puoi fare qualcosa del genere:

         

      Usa questo codice per spostare gli elementi a destra.

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

      Sono in esecuzione Angular 4 (v.4.0.0) e ng-bootstrap (Bootstrap 4). Questo codice non sarà rilevante ma sperando che le persone possano scegliere e scegliere ciò che funziona. Mi ci è voluto un po ‘di tempo per trovare una soluzione per far sì che i miei articoli giustifichino correttamente, collassare correttamente e implementare un menu a discesa del mio profilo google (usando OAuth).

         

      Per Bootstrap 4 beta, la barra di navigazione di esempio con gli elementi allineati a destra è:

        

      L’uso della confezione flessibile di bootstrap ci aiuta a controllare il posizionamento e l’allineamento del tuo elemento di navigazione. per il problema sopra aggiungendo mr-auto è una soluzione migliore.

        

      altro posizionamento può includere

       fixed- top fixed bottom sticky-top 

      L’esempio di lavoro per BS v4.0.0-beta.2 :

         
      container content

      Trova la riga 69 in verndor-prefixes.less e scriverla seguendo:

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

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

        

      Se tutto questo non funziona, ho aggiunto il 100% della larghezza alla class di navigazione in CSS. Fino a quel momento il mio auto non funzionava per me su questo progetto usando 4.1.

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

       .hidden { display:none; } #loginButton{ margin-right:2px; }