O Bootstrap 4 alinha os itens da barra de navegação para a direita

340

Como alinhar um item da barra de navegação para a direita?

Quero ter o login e me registrar à direita. Mas tudo o que tento parece não funcionar.

Isto é o que eu tentei até agora:

<div>ao redor do <ul>com o atributo:style="float: right"
<div>ao redor do <ul>com o atributo:style="text-align: right"
tentei essas duas coisas nas <li>tags
tentei todas essas coisas novamente com !importantadicionado ao final
alterado nav-itempara nav-rightno<li>
adicionou uma pull-sm-rightclasse ao<li>
adicionou uma align-content-endclasse ao<li>

Este é o meu código:

<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

As barras de navegação são construídas com o flexbox da versão alpha 6.

— max

11

Sim, então o que tenho que fazer para alinhar à direita. Eu já tentei algumas coisas de flexbox sem sorte. : /

— Luuk Wuijster

526

O Bootstrap 4 tem várias maneiras diferentes de alinhar itens da barra de navegação . float-rightnão funcionará porque a barra de navegação está agora flexbox.

Você pode usar mr-autoa margem direita automática no 1º (esquerdo) navbar-nav. Como alternativa , ml-autopode ser usado no segundo (à direita) navbar-nav, ou se você tiver apenas um 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

Existem também utilitários flexbox. Neste caso, você tem 2 navbar-navs, por isso, justify-content-betweenem navbar-collapsefuncionaria o mesmo o espaço entre eles,

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

Atualização para o Bootstrap 4.0 e mais recente

A partir do Bootstrap 4 beta, ml-autoainda funcionará para empurrar itens para a direita. Esteja ciente de que as navbar-toggleable-classes foram alteradas paranavbar-expand-*

Barra de navegação atualizada para o Bootstrap 4

Outro cenário frequente de alinhamento à direita do Bootstrap 4 Navbar inclui um botão à direita que permanece fora da navegação de recolhimento móvel, para que seja sempre mostrado em todas as larguras.

Botão de alinhamento à direita sempre visível

Relacionado: Bootstrap NavBar com itens alinhados à esquerda, ao centro ou à direita

— Zim
fonte

11

mr-autonão funciona se o item mais à direita for a dropdown. Os itens suspensos se espalham pela borda direita da página.

— Ege Ersoz

6

Funciona: codeply.com/go/P0G393rzfm - a questão não é mr-autoa questão de alinhar corretamente o que funciona. Poste uma nova pergunta se você tiver dúvidas com a lista suspensa, mas provavelmente está se referindo a esse problema: stackoverflow.com/questions/43867258/…

— Zim

2

Você também pode adicionar .dropdown-menu-rightaos menus suspensos alinhados à direita na barra de navegação. Não fazer isso pode cortar a lista suspensa em determinadas larguras.

— precisa saber é o seguinte

@ZimSystem, obrigado por suas respostas. Tenho acompanhado sua resposta aqui stackoverflow.com/questions/19733447/… . Tenho uma pergunta: como posso obter um item no lado esquerdo e outro no lado direito?

— Lokesh Pandey

Em codeply.com/go/P0G393rzfm , você mostrou um ul à esquerda e um ul à direita. Isso foi conseguido adicionando o sr-auto ao primeiro. Mas e se eu tiver apenas um ul? Não quero criar uma ul vazia apenas para alinhar outra à direita.

— Santosh Kumar

140

No meu caso, eu queria apenas um conjunto de botões / opções de navegação e achei que isso funcionaria:

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

Então, você adicionará justify-content-endà div e omitirá mr-autona lista.

Aqui está um exemplo de trabalho .

— Craig van Tonder
fonte

3

@numediaweb No exemplo dos OPs, ele usa dois elementos na navegação, alinhando um à esquerda e outro à direita; onde usei apenas um e alinhei à direita. Não é a resposta certa, mas é útil como uma resposta a uma ligeira variação da pergunta;)

— Craig van Tonder

Isso funciona para uma única navbar-nav, mas o mr-autométodo é usado nos documentos do Bootstrap .

— Zim

mr-autoé usado nos documentos, mas não para alinhar itens à esquerda. Esta resposta é semanticamente correta, como mencionado neste artigo: blog.getbootstrap.com/2017/01/06/bootstrap-4-alpha-6

— qwaz

A pergunta é: você está tentando alinhar 2 lista de links ou 1. Se apenas 1, sua resposta funciona e foi muito útil para mim. Obrigado!

— barefootsanders

Funcionou para mim, mas não sei por que a resposta acima não funciona.

— Suhail Akhtar

59

Para quem ainda está enfrentando problemas com esse problema no BS4, tente o código abaixo:

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

— Muhammad Tarique
fonte

7

Não - isso alinha tudo à direita. A pergunta diz que ele só quer alinhar um único item à direita.

— 81118 NickG

2

Verifique o doc oficial sobre m*-autoele empurra o conteúdo para a esquerda ou direita, dependendo de onde você colocar a classe

— Pierre de LESPINAY

@PierredeLESPINAY, sim ml-auto, empurra o conteúdo para a posição mais à direita, mas eu me perguntava por mr-0que não pode fazer o trabalho?

— abacate

42

No Bootstrap 4

Se você deseja alinhar a marca à esquerda e todos os itens da barra de navegação à direita, altere o padrão mr-autoparaml-auto

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

— geet Sebastian
fonte

32

Em Bootsrap 4.0.0-beta.2, nenhuma das respostas listadas aqui funcionou para mim. Finalmente, o site Bootstrap me deu a solução, não pelo documento, mas pelo código-fonte da página ...

Getbootstrap.com alinhar o seu direito navbar-navpara a direita com a ajuda da seguinte classe: ml-md-auto.

— ClemC
fonte

11

Funcionou lindamente para mim. Nada mais fez.

— Maria Campbell

14

Use em ml-autovez de mr-autodepois de aplicar navjustify-content-end aoul

— James Pike
fonte

9

Use este código para mover itens para a direita.

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

— Maijied Hasan Shuvo
fonte

11

que não funcionará quando você tiver um menu recolhido; no entanto, com o ml-auto ele ainda funcionará porque, quando o menu for recolhido, os itens <li> ainda ocuparão 100% da largura, portanto nenhuma margem será aplicada.

— Ryan S

8

Se você quiser a Página inicial, Recursos e preços à esquerda imediatamente após a sua nav-brand, faça o login e registre-se à direita, envolva as duas listas <div>e use .justify-content-between:

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

— J Kennedy
fonte

7

Basta adicionar mr-autoturma em ul:

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

Se você tiver uma lista de menus nos dois lados, poderá fazer algo assim:

<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

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

É pequena alteração no boostrap 4. Para alinhar a barra de navegação para o lado direito, você deve fazer apenas duas alterações. eles são:

em navbar-navclasse adicione w-100como navbar-nav w-100para fazer largura como 100
em nav-item dropdownclasse adicione ml-autocomo nav-item dropdown ml-autopara deixar a margem esquerda como automática.

Se você não entendeu, consulte a imagem que anexei a isso.

Link CodePen

Código fonte 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

Para o bootstrap 4.3.1, eu estava usando nav-pills e nada funcionou para mim, exceto o seguinte:

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

— Ajay Kumar
fonte

2

Em v4.3 inicialização basta adicionar ml-autono <ul class="navbar-nav"> Ex:<ul class="navbar-nav ml-auto">

— Mohit Prajapati
fonte

0

Estou executando o Angular 4 (v.4.0.0) e o ng-bootstrap (Bootstrap 4). Esse código não será relevante, mas espera que as pessoas possam escolher o que funciona. Levei algum tempo para encontrar uma solução para justificar meus itens corretamente, recolher adequadamente e implementar uma lista suspensa da minha imagem de perfil do 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

Para o Bootstrap 4 beta, a amostra da barra de navegação com elementos alinhados à direita é:

<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

O uso da caixa flexível de auto-inicialização nos ajuda a controlar o posicionamento e o alinhamento do seu elemento de navegação. para o problema acima, adicionar mr-auto é uma solução melhor.

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

outro canal pode incluir

fixed- top
    fixed bottom
    sticky-top

— maro
fonte

0

O exemplo de trabalho para 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 tudo acima falhar, adicionei 100% de largura à classe navbar em CSS. Até então, o Sr. Auto não estava trabalhando para mim neste projeto usando o 4.1.

— Dominic Davies
fonte

-1

Encontre a linha 69 em verndor-prefixes.less e escreva-a da seguinte maneira:

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

Expandir snippet

— Paulo
fonte

-2

Apenas copiei isso de uma das páginas getbootstrap para a versão lançada 4, que funcionou muito melhor que a anterior

<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

Eu sou novo no estouro de pilha e novo no desenvolvimento de front-end. Isto é o que funcionou para mim. Portanto, eu não queria que os itens da lista fossem exibidos.

.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