Grails Twitter Bootstrap 插件问题与 navbar-fixed-top答案

【问题标题】：Grails Twitter Bootstrap Plugin Issue with navbar-fixed-topGrails Twitter Bootstrap 插件问题与 navbar-fixed-top
【发布时间】：2012-09-05 16:02:56
【问题描述】：

我正在使用Grails 2.1.0 和@987654321@，但遇到navbar-fixed-top 的问题。

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

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

在使用 Grails Plugin for 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>

问题在于 Grails Plugin for Twitter Bootstrap 将 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 插件。

非常感谢您，我很感激！

【问题讨论】：

标签： grails twitter-bootstrap grails-plugin gsp

【解决方案1】：

Bootstrap 推荐该样式的位置，因为当屏幕宽度低于 980px 时，导航栏变为 static（而不是 fixed）。因此，在 padding 之后调用 bootstrap-responsive.css 可以防止移动设备顶部出现空白（没有固定元素来填充该填充）。

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

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

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

【讨论】：

感谢您的回复。只需要确保我理解......如果我添加一个内联样式块<style type="text/css"> (your media query solution here) </style>，它可以在由Grails Twitter Bootstrap Plugin <link href="/homes/static/bundle-bundle_bootstrap_head.css" type="text/css" rel="stylesheet" media="screen, projection" />创建的组合CSS文件之后，我不需要将它添加到@987654330 @ 或 bootstrap-responsive.css。这是正确的吗？
您可以将该规则添加为<style> 块或样式表文件。确实，您不必更改引导文件。
顺便说一句，在获得您的padding 后，尝试不同的屏幕/窗口大小来检查响应是否仍然有效；)