在移动设备上使用Bootstrap的导航栏折叠困难，并在首页上显示我的全屏旋转木马。基本上，导航栏折叠到汉堡按钮，但是当按下时，菜单会下降，但不会向下移动页面，而是菜单会覆盖现有的页面内容。
这里有一张描述情况的照片（第一张图片默认，第二张照片是应该发生的事情，即页面内容被推下来为导航栏腾出空间，第三张图片是发生了什么，这是navbar遍历内容，这不是我想要的）。 http://i.imgur.com/AXimFxC.jpg
非常确定它与我设置application.html.erb的方式有关，以便在向下滚动后出现带有导航栏的全屏旋转木马，但无法弄清楚如何使它们都工作
非常感谢任何帮助！
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Hot Dogs or Melany</title>
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<%= favicon_link_tag "/favicon.ico?1"%>
</head>
<body>
<% if current_page?(root_path) %>
<% else %>
<div class="nav-wrapper">
<nav class="navbar navbar-default" role="navigation">
<%= render 'layouts/header' %>
</nav>
</div>
<% end %>
<% flash.each do |name, msg| %>
<%= content_tag(:div, msg, class: "alert alert-info") %>
<% end %>
<%= yield %>
<%= render 'layouts/footer' %>
</body>
</html>
_header.html.erb
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<%= link_to image_tag("logo-bw-200px.png", :size => "85x40", :style => "margin-top: 10px;"), root_path %>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li style="margin-top: 5px;"><%= link_to "About", about_path %></li>
<li style="margin-top: 5px;"><%= link_to "Data", data_path %></li>
<% if user_signed_in? %>
<li style="margin-top: 5px;"><%= link_to "Stream", bolts_path %></li>
<li>
<%= link_to new_bolt_path do %>
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-bolt fa-stack-1x" id="spin" style="margin-top: -2px;"></i>
</span>
<% end %>
</li>
<li class="dropdown">
<%= link_to image_tag(current_user.avatar.url(:thumb), :size => "30x30", :class => "img-circle") + content_tag(:span, nil, :class => "caret"), "#", :class => "dropdown-toggle", "data-toggle" => "dropdown" %>
<ul class="dropdown-menu" role="menu">
<li><%= link_to "Profile", current_user %></li>
<li class="divider"></li>
<li><%= link_to "Account Settings", edit_user_registration_path %></li>
<li><%= link_to "Log Out", destroy_user_session_path, method: :delete %></li>
</ul>
</li>
<% else %>
<li style="margin-top: 5px;"><%= link_to "Log In", new_user_session_path %></li>
<% end %>
</ul>
</div><!-- /.navbar-collapse -->
</div>
<script>
$('#spin').hover(
function(){ $(this).addClass('fa-spin') },
function(){ $(this).removeClass('fa-spin') }
)
</script>
home.html.erb
<!-- CAROUSEL -->
<div class="carousel slide">
<div class="carousel-inner">
<div class="item bg bg1 active">
<div class="container">
<div class="carousel-caption">
<%= image_tag "logo-1000px.png", :size => "400x190", :class => "img-responsive", :style => "margin: 0 auto;" %>
<hr width="10%" style="margin-top:50px; margin-bottom: 50px;">
<h1>CHOOSE A TEAM. MAKE NOISE.</h1>
<hr width="10%" style="margin-top:50px; margin-bottom: 50px;">
<% if user_signed_in? %>
<% else %>
<%= link_to "SIGN UP", "/users/sign_up", :class => "btn btn-lg btn-primary", :style => "border-radius: 50px;" %>
<br /><br />
<p><i>or</i> <%= link_to "LOG IN", new_user_session_path, :style => "color: #fff;" %></p>
<% end %>
<p><small><%= link_to "Learn more", "#intro", :style => "color: #fff;" %></small></p>
<%= link_to "#intro", :style => "color: #fff;" do %>
<span class="fa fa-hand-o-down" style="font-size: 2em;"></span>
<% end %>
</div>
</div>
</div>
</div>
<div class="container" id="intro">
<div class="row" style="margin-top: 30px;">
<div class="col-md-4 center">
<%= image_tag "pickaside.jpg", :class => "img-circle" %>
<h3>PICK A SIDE</h3>
<p style="padding-left: 20px; padding-right: 20px; color: #7f8c8d;">Choose Hot Dogs or Melany. It doesn't matter which side you choose.</p>
</div>
<div class="col-md-4 center">
<%= image_tag "makenoise.jpg", :class => "img-circle" %>
<h3>MAKE NOISE</h3>
<p style="padding-left: 20px; padding-right: 20px; color: #7f8c8d;">Write a big, loud, <i>anonymous</i> message (called a Bolt) that disappears after you post a new one.</p>
</div>
<div class="col-md-4 center">
<%= image_tag "clapclap.jpg", :class => "img-circle" %>
<h3>CLAP CLAP</h3>
<p style="padding-left: 20px; padding-right: 20px; color: #7f8c8d;">Give two, one, or zero Claps to acknowledge other people's Bolts.</p>
</div>
</div>
</div>
<!-- NAVBAR -->
<div class="nav-wrapper">
<div class="nav navbar navbar-default affix" data-spy="affix" data-offset-top="50">
<%= render 'layouts/header' %>
</div>
</div>
CSS
.nav.affix {
position: fixed;
top: 0;
width: 100%
}
.nav-wrapper
{
min-height:50px;
}
html, body {
height:100%;
margin:0;
padding:0;
}
.carousel, .item, .active {
height:100%;
}
.carousel-inner {
height:100%;
}
.carousel {
//margin-bottom: 60px;
}
.carousel-caption {
z-index: 0;
}
.carousel .item {
background-color: #777;
}
.carousel .carousel-inner .bg {
background-repeat:no-repeat;
background-size:cover;
}
.carousel .carousel-inner .bg1 {
background-image:url('banner.jpg');
background-position: center center;
}
affix.js
$(function() {
$('.nav-wrapper').height($(".nav").height());
$('.nav').affix({
offset: { top: $('.nav').offset().top }
});
});