產生的頁面滯留在頁眉中的欄杆中

在添加頁眉部分後，在Rails中獲取一個奇怪的格式問題。即使所有標記都已正確關閉，home.html.erb中的英雄單位類仍將呈現在標題標記下方。我使用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; 
}

來源

2015-04-23 Shwheelz

看看Bootstrap documentation。還有，指出一個明確的紅盒子警告：

體填充需要

的固定導航欄將覆蓋其他內容，除非你添加填充到身體的頂部。嘗試一下你自己的價值觀或者使用下面的代碼片段。提示：默認情況下，導航欄高50px。
body { padding-top: 70px; } 
確保在覈心Bootstrap CSS之後包含此項。

這是因爲固定位置元素（它是基本HTML的函數，而不是Bootstrap）按定義浮動在其他元素的頂部。有a pretty good explanation of fixed, relative, and absolute positioning at CSS Tricks。

來源

2015-04-23 23:13:46

產生的頁面滯留在頁眉中的欄杆中

回答

相關問題