Question

我正在使用Grails 2.1.0和Twitter Bootstrap Plugin 2.1.1，遇到navbar-fixed-top的问题。

为了让Navbar固定在页面顶部，以便在调整大小时正常运行，Twitter Bootstrap Docs说明：

添加.navbar-fixed-top并记住通过添加至少40px填充来计算其下方的隐藏区域。一定要在核心Bootstrap CSS之后和可选的响应式CSS之前添加它。

使用Grails插件进行Twitter Bootstrap时如何做到这一点？

以下是我的尝试：

main.gsp

<head>
  ...
  <r:require modules="bootstrap-css"/>
  <style type="text/css">
    body {
      padding-top: 60px;
      padding-bottom: 40px;
    }
    .sidebar-nav {
      padding: 9px 0;
    }
  </style>
  <r:require modules="bootstrap-responsive-css"/>
  <r:layoutResources/>
</head>

问题是，用于Twitter Bootstrap的Grails插件获取bootstrap.css和bootstrap-responsive.css的内容，并将它们合并到以下合并文件中：static/bundle-bundle_bootstrap_head.css。

因此，根据Twitter Bootstrap文档，我无法在“核心Bootstrap CSS之后和响应式CSS之前”放置主体填充样式。

以下是我从上面的main.gsp获取的View Source HTML

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

<link href="/homes/static/bundle-bundle_bootstrap_head.css" type="text/css" 
    rel="stylesheet" media="screen, projection" />

如果没有办法做到这一点，我可以随时删除Grails Twitter Bootstrap插件并手动下载Twitter Bootstrap并将其放入我的Grails Project web-app/css，web-app/images和{{1} }。但是，我希望能够使用Grails Twitter Bootstrap插件。

非常感谢你，我很感激！

Answer 1

Bootstrap建议放置样式，因为当屏幕宽度低于980px时，导航栏变为static（不是fixed）。因此，在bootstrap-responsive.css之后调用padding会阻止移动设备顶部的空白区域（没有用于填充该填充的fxed元素）。

您可以使用媒体查询重现此行为：

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

将此CSS放在样式表中的任何位置，不要担心您的<links>

带有navbar-fixed-top的Grails Twitter Bootstrap插件问题

1 个答案: