Bootstrap導航欄上的額外行

我的導航欄增加了一行，我不知道爲什麼。我的導航欄有兩個側面：左側和右側。左側包含3個標籤，其中一個是下拉菜單。右側有兩個標籤，第一個標籤總是添加另一行。Bootstrap導航欄上的額外行

這是我的代碼，我使用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

來源

2017-05-05 ledao

您有一個{% block addbar %}{% endblock %}，是否導致任何意外的行爲？

來源

2017-05-05 07:19:51

沒有做到這一點沒有。 '{％block addbar％} {％endblock％}'用於顯示另一個html模板中的另一個標籤。問題是「Searching」之後的第一個標籤跳轉到第二行，因爲上面創建了一個空間。 – ledao

愚蠢的錯誤你有沒有關閉錨標記這裏在「搜索」

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

來源

2017-05-05 07:29:53

+1非常感謝你<3，下次我必須更加小心。確實這是一個愚蠢的錯誤，我覺得有點尷尬張貼在這裏。那麼你每天都能學到一些東 – ledao

如果你可以接受一個答案，這將是偉大的:) –

Bootstrap導航欄上的額外行

回答

相關問題