Bootstrap 导航栏上的额外行答案

【问题标题】：Extra row on Bootstrap navigation barBootstrap 导航栏上的额外行
【发布时间】：2017-10-03 12:39:57
【问题描述】：

我的导航栏多了一行，我不知道为什么。我的导航栏有两个侧面：左侧和右侧。左侧包含 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

【问题讨论】：

标签： html django frontend

【解决方案1】：

愚蠢的错误你没有在这里关闭你的锚标签在“搜索”中执行此操作

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

【讨论】：

+1 awe 非常感谢

【解决方案2】：

您有一个{% block addbar %}{% endblock %}，这会导致任何意外行为吗？

【讨论】：

不，它没有。 {% block addbar %}{% endblock %} 用于在另一个 html 模板中显示另一个标签。问题是“搜索”后的第一个标签跳转到第二行，因为在它上面创建了一个空格。