Html 媒体查询导航栏？

我目前正在安装一个新的应用程序。我打算花上上午/下午的时间让它完全响应媒体查询（第一次在真正的应用程序中这样做）

我有主题。媒体查询似乎工作正常。我还有gem的bootstrap sass，“~>3.0.2.0”

唯一不能正常工作的是我的导航栏。有人有过引导navbars 3.0的经验吗？这是我读过的一些文档

我试图获得这样的效果：导航栏右上侧有一个小框，框中有三条水平线，单击时，导航栏下拉列表中的链接/选项

我原以为“折叠导航栏折叠”会产生这种效果，但目前它什么也没做

以下是我当前的HTML：

<header>
  <div class="page-header">
      <h1 id='type'>QueAndAnswer</h1>
      <% if user_signed_in? %>
          <div>Logged in as<%= current_user.email %></div>
          <% end %>
  </div>
  <div class="navbar navbar-fixed-top navbar-inverse">
<!--     <div class='container'>
 -->
      <div class='navbar-head'>
        <a class="navbar-brand" href="http://localhost:3000">Que n A</a>
        <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="/">Home</a></li>
          <li><a href="http://localhost:3000/about">About</a></li>
          <li><a href="htpp://localhost:3000/help">Help</a></li>
          </ul>
        <ul class='nav navbar-nav navbar-right'>
          <% if user_signed_in? %>
            <li><%= link_to 'Edit profile', edit_user_registration_path %></li>
            <li><%= link_to "Logout", destroy_user_session_path, method: :delete %></li>

          <% else %>
            <li><%= link_to "Sign up", new_user_registration_path %></li>
            <li><%= link_to "Login", new_user_session_path %></li>
            <li><%= link_to 'Login with Github', user_omniauth_authorize_path(:github) %></li>
          <% end %>

        </ul>

      </div>

    </div>
    </div>
    </div>
    </div>
</header>

魁南德斯
登录为

我能够修复此代码。以下是最终结果：

<header>
  <div class="page-header">
      <h1 id='type'>QueAndAnswer</h1>
        <div id ='questionstats' class='jumbotron'></div>
          <% if user_signed_in? %>
          <div>Logged in as <strong><%= current_user.email %></strong></div>
          <% end %>
  </div>
  <div class="navbar navbar-fixed-top navbar-inverse">
    <div class='container'>
          <%= link_to 'Que n A', root_path, :class => 'navbar-brand' %>
            <button class ='navbar-toggle' data-toggle = 'collapse' data-target = '.navHeaderCollapse'>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="collapse navbar-collapse navHeaderCollapse">
              <ul class="nav navbar-nav">
                <li><%= link_to 'Home', root_path %></li>
              </ul>
              <ul class='nav navbar-nav navbar-right'>
                <% if user_signed_in? %>
                  <li><%= link_to 'Edit profile', edit_user_registration_path %></li>
                  <li><%= link_to "Logout", destroy_user_session_path, method: :delete %></li>
                <% else %>
                  <li><%= link_to "Sign up", new_user_registration_path %></li>
                  <li><%= link_to "Login", new_user_session_path %></li>
                  <li><%= link_to 'Login with Github', user_omniauth_authorize_path(:github) %></li>
                <% end %>
              </ul>
           </div>
        </div>
      </div>
</header>

希望这有助于任何人在未来使用引导导航，谢谢

// Any JavaScript/Coffee file within this directory, lib/assets/javascripts,       vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require underscore
//= require backbone
//= require bootstrap
//= require_tree ./models
//= require_tree ./collections
//= require_tree ./views
//= require_tree ./routers