Question

我已经阅读了一些不同的解决方案，但没有一个特定于Rails应用程序，因此我找不到修复。我有一个使用twitter bootstrap的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”文件中包含了bootstrap（通过上面的链接引入）：

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

我不确定一个简单的css样式规则是否可以修复此问题，或者是否需要更多内容。任何建议将不胜感激。我尝试了顶部提到的样式规则，无论是在我的头顶还是在href到custom.css.scss文件之前，都没有影响导航栏......

此链接提到了填充修复，但我没有直接包含样式表，因此我不知道在哪里放置填充修复... http://blog.benca.net/2012/03/17/css-order-matters/

Answer 1

好的，以备将来参考。我不确定我是怎么出错的，因为我第二次通过Rails Tutorial工作，但并行创建了一个自定义Web应用程序。我发现的是：

我们在教程中添加的“Universal”.css中的某处，我们添加了body { padding-top: 60px; }。当我以缩小/缩小模式检查应用程序时，这正是显示的填充。出于某种原因，当视口为宽/大（桌面大小）时，此填充不会显示，但在缩小时会显示。我简单地拿出了这个填充物和Boom !,导航栏在收缩时很好地排成一列并且在大的时候没有效果。希望这可以帮助那些正在学习本教程的人同时在响应方向上做事。欢呼声。

Answer 2

只需使用@media规则包装您的填充规则：

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

这将仅使用固定的导航栏应用正文填充。

Bootstrap导航栏：折叠时出现空白（Rails app）

2 个答案: