gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 14:56:53 26 4
gpt4 key购买 nike

我正在使用Grails 2.1.0Twitter Bootstrap Plugin 2.1.1,并且遇到了navbar-fixed-top的问题。

为了使导航栏固定在页面顶部以在调整大小时正确运行,Twitter Bootstrap Docs声明:

Add .navbar-fixed-top and remember to account for the hidden area underneath it by adding at least 40px padding to the . Be sure to add this after the core Bootstrap CSS and before the optional responsive 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.cssbootstrap-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/cssweb-app/imagesweb-app/js。但是,我希望能够使用Grails Twitter Bootstrap插件。

预先非常感谢,谢谢!

最佳答案

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

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

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

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

关于grails - 带有navbar-fixed-top的Grails Twitter Bootstrap插件问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12391484/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com