Phi*_*enn 0 grails gsp grails-plugin twitter-bootstrap
我正在使用Grails 2.1.0并且Twitter Bootstrap Plugin 2.1.1遇到了一个问题navbar-fixed-top.
为了使Navbar固定在页面顶部以在调整大小期间正常运行,Twitter Bootstrap Docs指出:
添加.navbar-fixed-top并记住通过添加至少40px填充来计算其下方的隐藏区域.一定要在核心Bootstrap CSS之后和可选的响应式CSS之前添加它.
在使用用于Twitter Bootstrap的Grails插件时,我该怎么做？
这是我尝试过的:
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的引导插件和手动下载Twitter的引导,并把它放在我的Grails项目的web-app/css,web-app/images和web-app/js.但是,我希望能够使用Grails Twitter Bootstrap插件.
非常感谢您提前,我很感激!
Bootstrap建议放置样式,因为当屏幕宽度低于980px导航栏时static(不fixed).所以bootstrap-responsive.css在padding阻止移动设备顶部的空白区域之后调用(没有fxed元素来填充该填充).
您可以使用媒体查询重现此行为:
@media (min-width:980px) {
body {
padding-top: 40px;
}
}
把这个CSS放在样式表的任何地方,不要担心你的 <links>
| 归档时间： |
|
| 查看次数： |
1791 次 |
| 最近记录： |