引导程序-导航栏固定顶部包含内容 [英] Bootstrap - navbar-fixed-top covers content
问题描述
我对navbar-fixed-top有疑问.好吧，我有一个简单的问题.我固定的导航栏涵盖了内容，例如在关于我们"页面中，它包含带有关于我们"标题的行.
I have a question about navbar-fixed-top. Well, I have a simple problem with it. My fixed navbar covers content, for example in "About us" page, it covers row with "About us" title.
我不知道如何解决它，因为当我调整网站大小(移动设备的大小)时，标题是可见的.
I have no idea how can I fix it, because when I resize website (mobile devices size) the header is visible.
当然我在其他页面(全角和404)中的页眉也有这种问题.
Of course I have this kind of problem with headers in other pages (Full Width and 404).
此外，在索引"页面中，它涵盖了一些轮播滑块.
Also, in Index page, it covers some of carousel slider.
信息:
bootstrap 2.3.2
bootstrap 2.3.2
让我知道，如何解决所有分辨率问题.
Let me know, how can I fix it on all resolutions.
推荐答案
响应在页面中:
添加到CSS:
body {
padding-top: 65px;
}
或更复杂但可以响应的解决方案，如果您的导航栏更改了高度(平板电脑中的ex出现了60像素以上；或者不同)，请使用css和javascript混合解决方案
or a more complex solution but responsive, if your navbar change the height( ex in tablets appears in more to 60px; or is different ) use a mixed solution with css and javascript
CSS:
#godown{
height: 60px;
}
HTML(恢复)
<body>
<nav class="navbar navbar-fixed-top " role="navigation" id="navMenu">
...
</nav>
<!-- This div make the magic :) -->
<div class="godown-60" id="godown"></div>
<!-- the rest of your site -->
...
JAVASCRIPT:
JAVASCRIPT:
<script>
//insert this in your jquery
//control the resizing of menu and go down the content in the correct position
$("#navMenu").resize(function () {
$('#godown').height($("#navMenu").height() + 10);
});
if ($("#navMenu").height() > $('#godown').height()) $('#godown').height($("#navMenu").height() + 10);
</script>
这篇关于引导程序-导航栏固定顶部包含内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
