Navbar .pull-right无效

时间:2012-11-11 14:57:54

标签: html twitter-bootstrap navbar

我正在尝试将导航栏的内容放到最右边,但我没有取得任何成功。

这就是它的样子:

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

1 个答案:

答案 0 :(得分:0)

您正在将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标记。这些不应嵌套在ul内,因为这是无效的html。