Jquery rails布局中的导航栏没有响应_Jquery_Html_Css_Ruby On Rails_Twitter Bootstrap

Jquery rails布局中的导航栏没有响应

jquery html css ruby-on-rails twitter-bootstrap

Jquery rails布局中的导航栏没有响应,jquery,html,css,ruby-on-rails,twitter-bootstrap,Jquery,Html,Css,Ruby On Rails,Twitter Bootstrap,我在样式表中添加了bootstrap.css，在rails样式表中也添加了bootstrap-responsive.css。我的问题是，当我重新缩放时，导航栏向下移动到下一行。但是，它没有适当地使用数据切换功能。我不知道为什么。提前谢谢下面是my application.html.erb的外观： <html> <head> <title>Sigma Nu Montana</title> <meta name="viewport" conte

我在样式表中添加了bootstrap.css，在rails样式表中也添加了bootstrap-responsive.css。我的问题是，当我重新缩放时，导航栏向下移动到下一行。但是，它没有适当地使用数据切换功能。我不知道为什么。提前谢谢

下面是my application.html.erb的外观：

<html>
<head>
<title>Sigma Nu Montana</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<%= stylesheet_link_tag    "application", :media => "all" %> // **I have a feeling the assets pipeline could be the problem?**
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>

 <div class="navbar navbar-inverse navbar-fixed-top">
          <div class="navbar-inner">
            <div class="container">
              <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-inverse-collapse">
                <span class="icon-th-list"></span>

              </a>
              <a class="brand"<%= link_to "Sigma Nu Montana", welcome_index_path %></a>
              <div class="nav-collapse collapse navbar-inverse-collapse">
                <ul class="nav">
                  <li><%= link_to "Chapter", chapter_index_path %></li>
                  <li><%= link_to "Why Join Sigma Nu?", justsnuit_index_path %></li>
                  <li><%= link_to "Alumni", alumni_index_path %></a></li>
                  <li><%= link_to "Contact Us", about_index_path %></a></li>

                </ul>


                <ul class="nav pull-right">
                  <% if user_signed_in? %> 
                  <li></li>
                  <li class="divider-vertical"></li>
                  <li class="dropdown">

                  <a href="#" class="dropdown-toggle" data-toggle="dropdown"  <b class="caret"
                      <%= link_to current_user.full_name, edit_user_registration_path %>
                    </a></b>
                    <ul class="dropdown-menu">
                      <li><%= link_to "Meal Requests", feed_path %></li>
                      <li><a href="#">Another action</a></li>
                      <li><a href="#">Something else here</a></li>
                      <li class="divider"></li>
                      <li><%= link_to "Log Out", logout_path %></li>
                    </ul>
                    <% else %> 

                      <li><%= link_to "Login", login_path %></li>



                    <% end %>
                  </li>
                </ul>
              </div><!-- /.nav-collapse -->
            </div>
          </div><!-- /navbar-inner -->
        </div>
<div class="container">

<% flash.each do |type, message| %>

<div class="alert <%= flash_class type %>">
    <button class="close" data-dismiss="alert">x</button>
    <%= message %>

</div>


<% end %>

<%= yield %>


</div>

  <br>
  <br>




  </style>

  <div class="span5 offset1">

   <a href="https://twitter.com/SigmaNuGammaPhi" target="_blank"><span class="twitter-        

    hover social-slide"></span></a>

    <a href="https://www.facebook.com/pages/Sigma-Nu-Gamma-Phi-Chapter-U-of-    

    M/374382014218?ref=br_tf" target="_blank"> <span class="facebook-hover social-slide">     

    </span></a>
    <br>
    <br>


    </div>
   <div class="row-fluid">
  <div class="span12 pagination-centered"><p>© 2013 Sigma Nu Montana.</p></div>
  </div>

  <script type="text/javascript">if (window.WNElement)   

  WNElement.setMaxHeight('WNDS76Items', 415);</script>

  </div>
  </div>


  </body>

  </html>

我认为数据目标=.navbar反向折叠是错误所在。所以，请试一试

<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-th-list"></span>

代替

<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-inverse-collapse">
            <span class="icon-th-list"></span>

是的，它是一种类似的关联，更细粒度。发生的是我有一个css规则，它的主体填充顶部为40px。因此，当我重新缩放时，响应引导将导航栏向下踢。该修复是一个简单的css媒体查询，最小宽度为980px，适用于正文填充规则。感谢您的回复-