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应用程序）

回答

相关问题