2016-07-13 4 views
0

私はフロントエンドのフレームワークとしてFoundation 5を使用していますが、クリック時のレスポンシブなドロップダウンメニューの問題は100%の画面幅にとどまっていません。レスポンシブnav Foundationでのサイジングの問題5

クリックされない場合はナビゲーションバーが次のように表示されます

enter image description here

それは側面から外れると画面の上部:メニューは次のようになりますクリックボタンを

enter image description here

クリックされたメニューボックスの両側に約30ピクセルずつ表示されます。

私のナビゲーションバーコードは次のようになります。

<!-- Start - TopBar --> 
<% if user_signed_in? %> 
    <div class="fixed"> 
    <nav class="top-bar" data-topbar role="navigation"> 
     <ul class="title-area"> 
     <li class="name"> 

     </li> 
     <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --> 
     <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li> 
     </ul> 

     <section class="top-bar-section"> 
     <!-- Right Nav Section --> 
     <ul class="right"> 
      <li class="has-dropdown"> 
      <a href="#">Admin Functions</a> 
      <ul class="dropdown"> 
       <li><%= link_to "My Profile", current_user %></li> 
       <li><%= link_to "Edit Profile", edit_user_registration_path(@user) %></li> 
      </ul> 
      </li> 
      <li class="has-dropdown"> 
      <a href="#"><%= current_user.f_name %> <%= current_user.l_name %></a> 
      <ul class="dropdown"> 
       <li><%= link_to "My Profile", current_user %></li> 
       <li><%= link_to "Edit Profile", edit_user_registration_path(@user) %></li> 
      </ul> 
      </li> 
      <li><%= link_to('Logout', destroy_user_session_path, :method => :delete) %></li> 
     </ul> 

     <!-- Left Nav Section --> 
     <ul class="left"> 
      <li><%= link_to "Dashboard", culverts_path %></li> 
     </ul> 
     </section> 
    </nav> 
    </div> 
    <% end %> 
<!-- End - TopBar --> 

私はこれを修正する方法がわからないです、私は無駄に、基礎フォーラムで尋ねてきました。

詳細情報が必要な場合はお尋ねください。

ありがとうございました。

+0

'navbar'をクリックするとinspect要素でチェックしましたか? – uzaif

+0

はいエラーが表示されません –

+0

いいえnavbarをクリックするとnavbarの幅が小さくなるのですか? – uzaif

答えて

0

問題はレールがscaffold.scssを生成した世代からそれを除外するのを忘れてしまい、コードと衝突していました。

問題は解決されました。

関連する問題