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

Verifiquei a sintaxe umas 100 vezes e parece correcta. O css personalizado que eu tenho, que é muito pouco, não parece estar prevalecendo qualquer. O CSS na consola parece muito semelhante e parece ser afetado pelo: 

.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):

Correct spacing enter image description here

consola da minha aplicação (incorrecta espaçamento): enter image description here enter image description here

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.

Author: Zim, 2018-02-28
Source

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.

Não funciona se destruíres a relação entre irmãos. Por outras palavras, não se pode simplesmente embrulhar aleatoriamente elementos em divs desnecessários.

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.

P. S. parece ter o hábito de embrulhar as coisas em divas desnecessárias. O 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.
 3
Author: WebDevBooster, 2018-02-28 07:36:04

Explicação sobre como ml-auto funciona.

Parece que isso já foi resolvido nos comentários. Eu só queria adicionar uma explicação de que 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

Aqui está um bom artigo sobre como as margens automáticas funcionam com flexbox.
 4
Author: Zim, 2018-02-28 12:23:30