Question

我的导航栏增加了一行，我不明白为什么。我的导航栏有两个方面：左侧和右侧。左侧包含3个标签，其中一个是下拉菜单。右侧有两个标签，第一个标签总是添加另一行。

这是我的代码，我使用的是Django + Bootstrap 3.3.7，jquery 1.12.0。

<div class="navbar-collapse collapse" id="topNavBar">
    <ul class="nav navbar-nav">
        <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                <span class="caret"></span>&nbsp Looking for...
            </a>
            <ul class="dropdown-menu">
                <li class="">
                    <a href="{% url 'service:room' %}">
                        <span class="glyphicon glyphicon-bed" aria-hidden="true"></span>&nbsp Rooms
                    </a>
                </li>
                <li class="">
                    <a href="{% url 'service:book' %}">
                        <span class="glyphicon glyphicon-book" aria-hidden="true"></span>&nbsp Textbooks
                    </a>
                </li>
                <li class="">
                    <a href="{% url 'service:restaurant' %}">
                        <span class="glyphicon glyphicon-cutlery" aria-hidden="true"></span>&nbsp Restaurants
                    </a>
                </li>
                <li class="">
                    <a href="{% url 'service:tutor' %}">
                        <span class="glyphicon glyphicon-education" aria-hidden="true"></span>&nbsp Tutoring
                    </a>
                </li>
            </ul>
        </li>
        <li class="">
            <a href="{% url 'service:result' %}">
                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>&nbsp Searching
            <a>
        </li>
    </ul>               
    <!-- </ul> -->
    <ul class="nav navbar-nav navbar-right">
        {% block addbar %}
        {% endblock %}
        <!-- <li class="">
            <a href="#">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&nbsp Add Room
            </a>
        </li> -->
        {% if request.user.is_authenticated %}
        <!-- Link to user's profile -->
        <li class="">
            <a href="{% url 'service:personal-rooms' %}">
                <span class=" glyphicon glyphicon-user" aria-hidden="true"></span>&nbsp hello {{request.user.username}}
            </a>
        </li>
        <li class="">
            <a href="{% url 'service:logout' %}">
                <span class="glyphicon glyphicon-log-out" aria-hidden="true"></span>&nbsp Log Out
            </a>
        </li>
        {% else %}
        <li class="">
            <a href="{% url 'service:login' %}">
                <span class="glyphicon glyphicon-log-in" aria-hidden="true"></span>&nbsp Log In
            </a>
        </li>
        <li class="">
            <a href="{% url 'service:register' %}">
                <span class="glyphicon glyphicon-tree-conifer" aria-hidden="true"></span>&nbsp Register
            </a>
        </li>
        {% endif %}
    </ul>
</div>

我感谢你们的任何建议。提前致谢：D

Answer 1

愚蠢的错误你没有在这里关闭你的锚标签在＆＃34;搜索＆＃34;

中执行此操作

 <a href="#">
                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>&nbsp Searching
            </a>

Answer 2

您有{% block addbar %}{% endblock %}，是否会导致任何意外行为？

Bootstrap导航栏上的额外行

2 个答案: