Bootstrap navbar：摺疊時出現空白（Rails應用程序）

我已閱讀了一些不同的解決方案，但沒有特定於Rails應用程序，因此我無法完全找到修復程序。我有一個使用twitter引導的rails應用程序。我在導航欄中使用了他們的自適應功能，當視口縮小導航欄上的圖標摺疊到下拉按鈕時...我遇到的一個問題是當導航欄在桌面和手機上都崩潰時，我在導航欄上方留白。我讀過有關把一些內聯樣式在調整填充，具體是：Bootstrap navbar：摺疊時出現空白（Rails應用程序）

<style type="text/css"> 
     body { 
      padding-top: 60px; 
      padding-bottom: 40px; 
     } 
</style>

的問題是在於，根據我讀過，我應該把這個樣式表之間的鏈接我的標題。問題是我沒有像通用Web應用程序一樣包含樣式表，我已經看過示例（這是一個Rails應用程序）。另外，這是我的第一個網絡應用程序，我對於事物的拉伸方式有點困惑。（這是建立在Rails教程之上的......）。這是我腦海中所擁有的。

<!DOCTYPE html> 
<html> 
<head> 
    <%= stylesheet_link_tag "application", :media => "all" %> 
    <%= javascript_include_tag "application" %> 
    <%= csrf_meta_tags %> 
    <%= render 'layouts/shim' %> 

    <!-- SETUP FOR RESPONSIVE BOOTSTRAP --> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <link href="app/assets/stylesheets/custom.css.scss"> 

</head>

我包括在我的「custom.css.scss」文件（以上鍊接被拉）與引導：

@import "bootstrap" 
@import "bootstrap-responsive"

我不知道，如果一個簡單的CSS樣式規則會解決這個問題，或者如果它需要更多的東西。任何建議將不勝感激。我嘗試了頂部提到的樣式規則，無論是在我的頭頂，還是在href到custom.css.scss文件之前，都沒有影響導航欄...

此鏈接提到了填充修正，但我不直接包含樣式表，因此我不知道在哪裏放置填充修正... http://blog.benca.net/2012/03/17/css-order-matters/

來源

2013-04-07 MCP

好的，供將來參考。我不確定我究竟是怎麼出錯的，因爲我第二次通過Rails教程工作，但同時創建了一個自定義Web應用程序。我發現的是：

我們在教程中添加的「Universal」.css中的某處，我們添加了body { padding-top: 60px; }。當我以縮小/縮小模式檢查應用程序時，這正是顯示的填充。出於某種原因，當視口寬/大（桌面大小）時不會顯示此填充，但在收縮時會出現此填充。我簡單地拿出這個填充和Boom！，當縮小的時候，導航欄很好地排列起來，並且在大的時候沒有效果。希望這可以幫助那些正在從教程中學習，同時在一個響應方向上採取行動的人。乾杯。

來源

2013-04-07 22:38:44 MCP

只是爲了記錄它不是你，因爲我在我的代碼中發現了奇怪的東西！ – Webby 2013-04-16 13:37:23

這是因爲，對於980像素以上的屏幕，'.navbar-fixed-top'使用'position：fixed'，將其從正常流中移除，並使主體內容向上移動60px。這就是爲什麼你添加'body {padding-top：60px; '風格。但是在980px以下，'.navbar-fixed-top'會回到'position：static'，這樣就不需要額外的填充。 – claymation 2013-08-15 01:22:32

即使使用這個設置，你也不需要完全刪除'body {padding-top：60px; '線。在Custom.css.scss中，你可以在'@import'bootstrap-responsive「'上方移動這一行 – IkegawaTaro 2013-09-18 03:45:40

只需使用@media規則包住填充規則體：

@media (min-width: 980px) { 
    body { 
     padding-top: 60px; 
    } 
}

這將應用於機身僅填充固定導航欄。

來源

2013-10-07 09:02:56 Thantifaxath

Bootstrap navbar：摺疊時出現空白（Rails應用程序）

回答

相關問題