3

我已经阅读了一些不同的解决方案，但没有一个是特定于 Rails 应用程序的，因此我无法找到解决方案。我有一个使用 twitter 引导程序的 rails 应用程序。我在导航栏中使用他们的响应功能，当视口缩小导航栏上的图标折叠成下拉按钮时......我遇到的一个问题是，当导航栏在桌面和手机上折叠时，我获取导航栏上方的空白。我已经读过关于在其中调整填充的一些内联样式，特别是：

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

问题是，根据我所阅读的内容，我应该将其放在标题中的样式表链接之间。问题是我没有像我看到的示例（这是一个 Rails 应用程序）那样包含样式表。另外，这是我的第一个 Web 应用程序，我对事情是如何被拉入的有点困惑。（这是建立在 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 样式规则是否可以解决这个问题，或者它是否需要更多的东西。任何建议将不胜感激。我尝试了顶部提到的样式规则，无论是在我的头顶还是在 custom.css.scss 文件的 href 之前，都没有影响导航栏......

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

4

2 回答 2

1

好的，供以后参考。我不确定我到底是怎么出错的，因为我第二次学习 Rails 教程，但同时创建了一个自定义 Web 应用程序。我发现的是这样的：

Somewhere along the way in the "Universal" .css that we add in the Tutorial, we add body { padding-top: 60px; }. When I inspected app in shrunk/scaled down mode, this is exactly the padding that was showing up. For some reason, this padding doesn't show up when the viewport is wide/big (desktop size), but does when it is shrunk. I simply took out this padding and Boom!, the navbar lined up nicely when shrunk and had no effect when big. Hope this might help someone who is learning from the tutorial while taking things in a responsive direction at the same time. Cheers.

于 2013-04-07T22:38:44.843 回答
1

Simply wrap your padding rules for body with @media rule:

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

This will apply body padding only with fixed navbar.

于 2013-10-07T09:02:56.557 回答