ブートストラップ：スパンクラスのアイコンバーが機能しない

スパンクラスのアイコンバーを使用して、ウィンドウのサイズを変更した後にその3行のシンボルを表示し、そのアイコンの下に他のコンポーネントが表示されるようにしました。しかし、ウィンドウのサイズを変更するとアイコンが表示され、それをクリックしても何も起こりません。これは私が行ったことです：どうしたのですか？がjaiswal @pratik事前にブートストラップ：スパンクラスのアイコンバーが機能しない

<body> 
    <nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 

     <! Header --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topNavBar"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="{% url 'ontheway:index' %}"> Way2go </a> 
     </div> 

     <! Items --> 
     <div class="collapse navbar-collapse" id="#topNavBar"> 
      <ul class="nav navbar-nav"> 
       <li class="active"> 
        <a href="{% url 'ontheway:index' %}"> 
         <span aria-hidden="true"></span>&nbsp;&nbsp;Home 
        </a> 
       </li> 
       <li class=""> 
        <a href="#"> 
         <span aria-hidden="true"></span>&nbsp;&nbsp;Hotels 
        </a> 
       </li> 
       <li class=""> 
        <a href="#"> 
         <span aria-hidden="true"></span>&nbsp;&nbsp;Homestays 
        </a> 
       </li> 
      </ul> 


      <form class="navbar-form navbar-left" role="search" method="get" action="#"> 
       <div class="form-group"> 
        <input type="text" class="form-control" name="q" value=""placeholder="Search tourist places,hotels, homestays here"> 
       </div> 
       <button type="submit" class="btn btn-default">&nbsp;Search</button> 
      </form> 


      <ul class="nav navbar-nav navbar-right"> 
       <li class=""> 
        <a href="#"> 
         <span class="glyphicon glyphicon-bell" aria-hidden="true"></span>&nbsp;Notifications 
        </a> 
       <li class=""> 
        <a href="#"> 
         <span aria-hidden="true"></span>&nbsp;Log in 
        </a> 
       </li> 
       <li class=""> 
        <a href="#"> 
         <span aria-hidden="true"></span>&nbsp;Sign up 
        </a> 
       </li> 

      </ul> 
     </div> 
    </div> 
</nav>

出典

2017-09-08 pratik jaiswal

をありがとう、あなたの問題はcollapseクラスを使用して要素のid属性の値に由来します。

<!-- Header ----> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topNavBar"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="{% url 'ontheway:index' %}"> Way2go </a> 
     </div> 

     <!-- Items ----> 
     <div class="collapse navbar-collapse" id="#topNavBar"> <!--Take out the hash symbol--> 
...

あなたは先頭に#があります。それを取り除くと、問題は解決されます。

これは実際にはcodeplyで確認できます。

出典

2017-09-08 19:11:33 cwanjt

うん！ありがとうございました –

よろしくお願いします。それがあなたの問題を解決したので、答えの左側にあるチェックマークをクリックして、受け入れられた回答としてマークしてください。 – cwanjt

ブートストラップ：スパンクラスのアイコンバーが機能しない

答えて

関連する問題