html - 导航栏 .pull-right 不起作用

Question

我试图将我的导航栏的内容放在最右边，但我没有任何成功。

这是它的样子：

<div class="navbar navbar-inverse ">
            <div class="navbar-inner navbar-fixed-top" id="navbar-teste">
                    <a class="brand" href="/">Fiscalização</a>
                        <ul class="nav">
                            <li class="divider-vertical"></li>

                                <li><a href="/">Início</a></li>
                                <li class="divider-vertical"></li>
                                    <form class="navbar-search pull-left">
                                        <input type="text" class="search-query" placeholder="Pesquisar">
                                    </form>
                                    <ul class="nav pull-right">
                                        <li class="divider-vertical"></li>
                                        <li class="dropdown"  id="menu1">
                                            <a class="dropdown-toggle " data-toggle="dropdown" href="#menu1">
                                                <i class="icon-user "></i>  {{user.username}}
                                                <b class="caret"></b>
                                            </a>
                                            <ul class="dropdown-menu">
                                                <li><a href="/alterar/dados/usuario/">Alterar Dados de Cadastro</a></li>
                                                <li><a href="{%url mudar_senha %}">Alterar Senha</a></li>
                                                <li><a href="/sair/">Sair</a></li>
                                            </ul>
                                        </li>
                                    </ul>   
                        </ul>

              </div>
</div>

Answer 1

您正在将您的ul内部嵌套在没有页面全宽的 ul 中。

<div class="navbar navbar-inverse ">
            <div class="navbar-inner navbar-fixed-top" id="navbar-teste">
                    <a class="brand" href="/">Fiscalização</a>
                        <ul class="nav pull-left">
                            <li class="divider-vertical"></li>

                                <li><a href="/">Início</a></li>
                                <li class="divider-vertical"></li>
                        </ul>
                                    <form class="navbar-search pull-left">
                                        <input type="text" class="search-query" placeholder="Pesquisar">
                                    </form>
                                    <ul class="nav pull-right">
                                        <li class="divider-vertical"></li>
                                        <li class="dropdown"  id="menu1">
                                            <a class="dropdown-toggle " data-toggle="dropdown" href="#menu1">
                                                <i class="icon-user "></i>  {{user.username}}
                                                <b class="caret"></b>
                                            </a>
                                            <ul class="dropdown-menu">
                                                <li><a href="/alterar/dados/usuario/">Alterar Dados de Cadastro</a></li>
                                                <li><a href="{%url mudar_senha %}">Alterar Senha</a></li>
                                                <li><a href="/sair/">Sair</a></li>
                                            </ul>
                                        </li>
                                    </ul>   
                        </ul>

              </div>
</div>

我已经结束了ul, 以分离出form第二个ul标签。这些不应嵌套在 aul中，因为这是无效的 html。