o ml-auto não está a empurrar as ligações da barra de navegação para a direita
estou a usar reactstrap
e tenho estado a seguir esta ligação:
Https://reactstrap.github.io/components/navbar/
no exemplo, o {[2] } está a empurrar o <NavItem>
para a direita. No entanto, o que estou tentando implementar (que é realmente semelhante ao exemplo) o <NavItem>
está rendendo bem ao lado do <NavbarBrand>
.
.ml-auto, .mx-auto {
margin-left: auto!important;
}
pelo menos comutando-o na consola no exemplo, move o <NavItem>
mesmo ao lado do {[[5]} como se estivesse na minha aplicação (que eu não quero). Eis o que estou a ver:
exemplo de Reactstrap (espaço correcto):
consola da minha aplicação (incorrecta espaçamento):
Como é que consigo o espaço na minha aplicação?
Não me parece claro o que está a afectar trabalhar num e não no outro.2 answers
Os Componentes da barra de navegação (e muitos outros componentes) só funcionarão se os usar da forma que foram concebidos para serem usados.
Por exemplo, ml-auto
funciona com elementos irmãos.
Remova o div que colocou à volta da barra de navegação e o componente de colapso para fazer com que o selector de irmãos funcione como destinar.
Também: não use a bandeira !important
como uma solução permanente em qualquer um dos seus css personalizados. Essa bandeira É só para testes rápidos.
container
também está embrulhado num div tão inútil. Não adicione código desnecessário para algum tipo de"estética". Só adicione código se ele realmente faz alguma coisa e use comentários para tudo o resto.
Explicação sobre como ml-auto
funciona.
ml-auto
não estava funcionando porque é flexbox o pai precisa ser completo da barra de navegação. Então, também poderia ter sido resolvido adicionando w-100
ao div extra..
<nav class="navbar navbar-expand-md navbar-light bg-faded">
<a class="navbar-brand" href="#">reactstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="w-100">
<div class="navbar-collapse collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
...
</ul>
</div>
</div>
</nav>
ml-auto
funciona por causa da forma como o pai flexbox "encolhe" o(s) elemento (s) do bloco-filho por padrão. Não tem nada a ver com elementos irmãos, e funcionaria tudo bem com apenas um filho no Pai flexbox: https://www.codeply.com/go/xPaoNJMzbG