响应式导航基础5的大小调整问题

Question

我使用基础5作为我的前端框架，并且在点击时没有保持100％屏幕宽度的响应式下拉菜单出现问题。

未点击时，导航栏显示如下：

在按钮上单击菜单如下所示：

它在屏幕的两侧和顶部从点击的菜单框的每一侧大约30 px。

我的导航条形码如下所示：

<!-- 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 -->

我不确定如何纠正这个问题，我在基金会论坛上提出要求，无济于事。

请询问您是否需要任何进一步的信息。

感谢。

Answer 1

问题是rails生成了scaffold.scss我忘了将它排除在代之外并且它与我的代码冲突了。

问题已经解决。