Bootstrap 4 alinhar itens da barra de navegação para a direita

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

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

[1

Isto é o que eu tentei até agora:

  • <div> em torno do <ul> com o atributo: style="float: right"
  • <div> em torno do <ul> com o atributo: <div> com o atributo: style="text-align: right"
  • tentei essas duas coisas nas tags <li>
  • Tentei todas essas coisas novamente com o `!importante' adicionado ao final
  • mudou o nav-item para nav-right no <li>
  • adicionou uma classe pull-sm-right' ao
  • `
  • adicionou uma classe align-content-end' ao
  • `

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>
Zim
Pergunta editada :em
Programação
css twitter-bootstrap flexbox bootstrap-4 navbar
6º janeiro 2017 в 8:02
15 vistas
Solução

Bootstrap 4 tem many different ways to align navbar items. float-right won't work because the navbar is now flexbox.

Você pode utilizar o novo mr-auto para margem direita automática na 1ª (esquerda) navbar-nav. Alternativamente, ml-auto pode ser usado no **2nd*** (direita) navbar-nav , ou se você tiver apenas um único 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

Há também os utils flexbox. Neste caso, você tem 2 navbar-navs, então o justify-content-between em navbar-collapse funcionaria o mesmo 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>
**Actualização para Bootstrap 4.0 e mais recentes***

A partir do Bootstrap 4 beta, ml-auto ainda funcionará para empurrar itens para a direita. Basta estar ciente de que as classes navbar-toggleable- mudaram para `navbar-expand-*''.

Atualizado navbar à direita para Bootstrap 4

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

Botão de alinhamento à direita sempre visível

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

Zim
Resposta editada :em
Comentários (7)

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

<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 ao div e omitirá mr-auto na lista.

Aqui está um exemplo de trabalho.

Comentários (6)

I'sou novo para empilhar overflow e novo para o desenvolvimento frontal. Isto é o que funcionou para mim. Então eu não queria que os itens da lista fossem exibidos.

.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>
Comentários (0)