Question

请参阅导航栏here的“信息”部分。我试图让它漂浮正确。我使用.pull-right像Bootstrap文档say，但它不起作用。

我还尝试使用Inspect Element并将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>

为什么我的Bootstrap导航栏不能正常工作？

1 个答案: