生成的页面卡在 Rails 的页眉中答案

【问题标题】：Yielded Pages Stuck in Header in Rails生成的页面卡在 Rails 的页眉中
【发布时间】：2015-04-23 22:54:57
【问题描述】：

添加部分标题后，Rails 中出现奇怪的格式问题。即使所有标签都已正确关闭，home.html.erb 中的 hero-unit 类仍会呈现在标题标签下方。我正在使用 bootstrap cdn 来获取我的课程，而且我几乎没有覆盖默认值。

application.html.erb

<body>
  <%= render 'layouts/header' %>
  <%= yield %>
</body>

_header.html.erb

<header class="navbar navbar-fixed-top navbar-invserse">
  <%= link_to "Item Database", root_path, id: "logo" %>
  <ul class="nav pull-right">
    <li><%= link_to "Home", root_path %></li>
    <% if signed_in? %>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          Account <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
          <li><%= link_to "Profile", edit_user_registration_path %></li>
          <li><%= link_to "Logout", destroy_user_session_path, method: :delete %></li>
        </ul>
      </li>
    <% else %>
      <li><%= link_to "Signup", new_user_registration_path %></li>
      <li><%= link_to "Sign in", new_user_session_path %></li>
    <% end %>
  </ul>
</header>

home.html.erb

<div class="center hero-unit">
  <h2>Type a search term</h2>
  <%= form_tag items_path, class: "form-inline", method: "get" do %>
    <div id="search_container" class="form-group">
      <%= text_field_tag :search, params[:search], id: "search_bar_home", class: "form-control" %>
      <%= submit_tag "Search", name: nil, id: "search_btn_home", class: "btn btn-primary" %>
    </div>
  <% end %>
</div>

custom.css.scss

@import "bootstrap";

body {
    background: url('/assets/background');  
}

.center {
    text-align: center;
}

label {
    color: white;
}

h2 {
    color: white;
}

i {
    color: gray;
}

【问题讨论】：

标签： html css ruby-on-rails twitter-bootstrap

【解决方案1】：

看看Bootstrap documentation。有一个明确的红框警告指出：

需要身体填充

固定导航栏将覆盖您的其他内容，除非您在正文顶部添加填充。试试你自己的价值观或使用我们下面的 sn-p。提示：默认情况下，导航栏的高度为 50px。
body { padding-top: 70px; }
确保在核心 Bootstrap CSS 之后包含它。

这是因为固定位置的元素（它是基本 HTML 的函数，而不是 Bootstrap）根据定义浮动在其他元素的顶部。有a pretty good explanation of fixed, relative, and absolute positioning at CSS Tricks。

【讨论】：