2017-05-05 16 views
0

マイナビゲーションバーに余分な行が追加され、理由がわかりません。ナビゲーションバーには左右の2つの部分があります。左側には3つのラベルがあり、そのうちの1つはドロップダウンメニューです。右側には2つのラベルがあり、最初のラベルには常に別の行が追加されます。ブートストラップナビゲーションバーの余分な行

私のコードは、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

答えて

0

{% block addbar %}{% endblock %}があります。予期しない動作が発生していますか?

+0

を「検索」でこれを行います。 '{%block addbar%} {%endblock%}'は、別のHTMLテンプレートに別のラベルを表示するために使用されます。この問題は、「検索中」の後の最初のラベルが、上に作成されたスペースがあるため、2行目にジャンプします。 – ledao

1

愚かな過ちあなたはここに をあなたのアンカータグを閉じていないんそれはないん

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

+1大変ありがとうございます<3、私は次回より注意する必要があります。確かにそれは愚かな間違いです、私はここにこれを掲示する少し恥ずかしい感じ。あなたは毎日何かを学びます! – ledao

+0

あなたが答えを受け入れることができれば、それは素晴らしいだろう:) –