小屏幕尺寸上的引导导航栏重叠内容

Question

您好，我正在使用带有两种不同导航栏的引导程序，一种用于大屏幕，一种用于手机大小的屏幕。

网址：http://www.gamingonlinux.com/

两个导航栏的代码：

<!-- navbar -->
<div class="hidden-xs">
    <div class="container">
        <div class="navbar navbar-fixed-top {:inverse}" role="navigation">
          <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
              </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/" style="padding-top: 0px; padding-bottom: 0px;"><img src="/templates/default/images/navbar_logo_{:theme}.png" alt="GamingOnLinux" /></a></li>
                    <li><a href="/">Home</a></li>
                    <li><a href="/donate/">Donate</a></li>
                    <li><a href="/sales/">Sales</a></li>
                    <li><a href="/contact-us/">Submit Tip</a></li>
                    <li><a href="/crowdfunding/">Wiki</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Forum <b class="caret"></b></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="/forum/">Forum</a></li>
                            <li><a href="/community/">Community Page</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> {:username} <b class="caret"></b></a>
                        <ul class="dropdown-menu" role="menu">
                            {:user_menu}
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-search"></span><b class="caret"></b></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><form method="get" action="/index.php?module=search" class="navbar-form" role="search">
                    <input type="hidden" name="module" value="search">
                    <input type="text" class="form-control" name="q" placeholder="Search Articles">
                    <input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
                </form></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- navbar phone screens -->
<div class="visible-xs">
    <div class="container">
        <div class="navbar navbar-fixed-top {:inverse}" role="navigation">
          <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
            <ul class="nav navbar-nav">
                <li><a href="/">Home</a></li>
            </ul>
            <ul class="nav navbar-nav">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-search"></span><b class="caret"></b></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><form method="get" action="/index.php?module=search" class="navbar-form" role="search">
                        <input type="hidden" name="module" value="search">
                        <input type="text" class="form-control" name="q" placeholder="Search Articles">
                        <input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
                        </form>
                        </li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span><b class="caret"></b></a>
                    <ul class="dropdown-menu" role="menu">
                        {:user_menu}
                    </ul>
                </li>
            </ul>
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/"><img src="/templates/default/images/navbar_logo_{:theme}.png" alt="GamingOnLinux" /></a>
              </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/donate/">Donate</a></li>
                    <li><a href="/sales/">Sales</a></li>
                    <li><a href="/contact-us/">Submit Tip</a></li>
                    <li><a href="/crowdfunding/">Wiki</a></li>
                    <li><a href="/forum/">Forum</a></li>
                    <li><a href="/community/">Community Page</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="contentwrap">
    <div class="container">
        <div class="add-bottom-margin">
            <!-- image carousel -->
            <div class="carousel slide" data-ride="carousel">
                <!-- Wrapper for slides -->
                 <div class="carousel-inner">
                    {:carousel_list}
                </div>
                <!-- Controls -->
                <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div><!-- /.carousel -->
        </div>

然后这个 JS 代码用于计算“contentwrap”的正确位置，以确保它直接位于导航栏之后，并且它在我们的普通导航栏上有效，但奇怪的是在小屏幕导航栏上无效：

jQuery(document).ready(function() {
            $('.contentwrap').css({
                'margin-top': (($('.navbar-fixed-top').height()) + 1) + 'px'
            });
            $(window).resize(function() {
                $('.contentwrap').css({
                    'margin-top': (($('.navbar-fixed-top').height()) + 1) + 'px'
                });
            });
});  

我是否遗漏了一些明显的东西，为什么它在 visible-xs 导航栏上不起作用？

JS 代码来自这篇帖子twitter bootstrap navbar fixed top overlapping site 供参考，少数人使用它。

Answer 1

感谢“tmg”的评论，我设法修复了它

我给每个导航栏一个id，然后把它们加在一起，很简单，而且效果很好。

$('.contentwrap') .css({'margin-top': (($('#nav-small').height() + $('#nav-normal').height()) + 1 )+'px'});
$(window).resize(function()
{
        $('.contentwrap') .css({'margin-top': (($('#nav-small').height() + $('#nav-normal').height()) + 1 )+'px'});
});

Answer 2

不需要任何 jQuery 胶水的建议：

• 将 navbar-fixed-top 更改为 navbar-top 并且不要放置导航栏 在 .container 中。

• 那么内容应该在导航栏之后开始。 （调整导航栏和内容 相应的边距）

Answer 3

$('.navbar-fixed-top').height()

这个类有 2 个元素。 上面的代码计算了相同屏幕情况下第一个元素的高度为零

计算元素高度的汇总

var calcHeights = function (elements) {
            var r = 0;
            elements.each(function () {
                r += $(this).height();
            });
            return r;
        }

用calcHeights($('.navbar-fixed-top'))代替$('.navbar-fixed-top').height()