0

我正在使用Grails 2.1.0andTwitter Bootstrap Plugin 2.1.1遇到问题navbar-fixed-top。

为了使导航栏固定在页面顶部以在调整大小期间正确运行，Twitter Bootstrap Docs指出：

添加 .navbar-fixed-top 并记住通过向 .navbar-fixed-top 添加至少 40px 的填充来说明其下方的隐藏区域。请务必在核心 Bootstrap CSS 之后和可选的响应式 CSS 之前添加它。

使用 Grails Plugin for Twitter Bootstrap 时如何做到这一点？

这是我尝试过的：

主文件

<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 获得的查看源代码 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 项目的web-app/css、web-app/images和web-app/js. 但是，我希望能够使用 Grails Twitter Bootstrap 插件。

非常感谢您，我很感激！

4

1 回答 1

6

Bootstrap 推荐该样式的位置，因为当屏幕宽度低于980pxnavbar 时变为static(not fixed)。bootstrap-responsive.css因此，在阻止移动设备顶部的空白区域之后调用padding（没有固定元素来填充该填充）。

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

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

把这个 CSS 放在你的样式表的任何地方，不用担心你的<links>

于 2012-09-12T15:36:14.517 回答