html - 为什么 pull-right 对我的 Bootstrap 导航栏不起作用？

Question

查看导航栏的信息部分 here .我试图让它正确 float 。我像 Bootstrap 文档一样使用 .pull-right say ，但它不起作用。

我还尝试过检查元素并将 float: right !important; 直接应用于 li，但没有用，然后应用于 a，这也没有用。

这是我的代码:

<div class="navbar"">
    <div class="navbar-inner">
        <ul class="nav">
            <li class="divider-vertical"></li>
            <li id="academics" class="dropdown main_college_nav_item"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Academics <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li id="professors"><a>Professors</a></li>
                    <li id="classes"><a>Classes</a></li>
                    <li id="difficulty"><a>Difficulty</a></li>
                    <li id="major"><a>Majors</a></li>
                </ul>
            </li>
            <li class="divider-vertical"></li>
            <li id="living_environment" class="dropdown main_college_nav_item"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Living Environment <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li id="campus"><a>Campus</a></li>
                  <li id="food"><a>Food</a></li>
                  <li id="housing"><a>Housing</a></li>
                  <li id="weather"><a>Weather</a></li>
                  <li id="safety"><a>Safety</a></li>
                </ul>
            </li>
            <li class="divider-vertical"></li>
            <li id="social_life" class="dropdown main_college_nav_item"><a class="dropdown-toggle" data-toggle="dropdown">Social Life <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li id="kids"><a>Kids/Atmosphere</a></li>
                  <li id="parties"><a>Parties</a></li>
                </ul>
            </li>
            <li class="divider-vertical"></li>
            <li id="information" class="main_college_nav_item"><a class="pull-right">Information <i class="icon-resize-vertical"> </i></a></li>
            <li class="divider-vertical"></li>
        </ul>
    </div>
</div>

Answer 1

使用下面的 HTML 代替您的 HTML。

我为“信息”选项卡创建了单独的 ul 并向右浮动。

更新: Working Demo

<div class="navbar">
    <div class="navbar-inner">
        <ul class="nav">
            <li class="divider-vertical"></li>
            <li id="academics" class="dropdown main_college_nav_item"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Academics <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li id="professors" class="active"><a>Professors</a></li>
                    <li id="classes"><a>Classes</a></li>
                    <li id="difficulty"><a>Difficulty</a></li>
                    <li id="major"><a>Majors</a></li>
                </ul>
            </li>
            <li class="divider-vertical"></li>
            <li id="living_environment" class="dropdown main_college_nav_item"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Living Environment <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li id="campus"><a>Campus</a></li>
                  <li id="food"><a>Food</a></li>
                  <li id="housing"><a>Housing</a></li>
                  <li id="weather"><a>Weather</a></li>
                  <li id="safety"><a>Safety</a></li>
                </ul>
            </li>
            <li class="divider-vertical"></li>
            <li id="social_life" class="dropdown main_college_nav_item"><a class="dropdown-toggle" data-toggle="dropdown">Social Life <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li id="kids"><a>Kids/Atmosphere</a></li>
                  <li id="parties"><a>Parties</a></li>
                </ul>
            </li>
            <li class="divider-vertical"></li>

        </ul>



<ul class="nav pull-right">

            <li class="divider-vertical"></li>
            <li id="information" class="main_college_nav_item"><a>Information <i class="icon-resize-vertical"> </i></a></li>

        </ul>
    </div>
</div>