引导程序-导航栏固定顶部包含内容 | 导航栏固定顶部包含内容

本文介绍了引导程序-导航栏固定顶部包含内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我对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.

信息:

网站: http://testerix.site90.com/index.html

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:

<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>

这篇关于引导程序-导航栏固定顶部包含内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！