Question

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

这是我的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>

Answer 1

我认为data-target=".navbar-inverse-collapse"是错误。所以，请尝试

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

导轨布局中的导航栏没有响应

1 个答案: