bootstrap导航栏在小屏幕上的重叠内容

嗨我使用两种不同的导航栏，一个用于大屏幕和一个用于手机大小的屏幕。bootstrap导航栏在小屏幕上的重叠内容

网址：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' 
       }); 
      }); 
});

我失去了一些东西很明显，为什么它不可见-X工作s的导航栏？

供参考的JS代码来自这篇文章twitter bootstrap navbar fixed top overlapping site和一些人使用它。

来源

2014-10-02 NaughtySquid

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

你有这个类的2个元素。上面的代码计算第一要素的高度等于零在同一屏幕的情况下

计算元素

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

，而不是$('.navbar-fixed-top').height()使用calcHeights($('.navbar-fixed-top'))

来源

2014-10-02 10:04:57 tmg

是啊，我刚刚意识到这可能是问题，什么是它周围的好办法？ – NaughtySquid 2014-10-02 10:06:29

只需添加他们的高度并使用摘要。 – tmg 2014-10-02 10:11:01

我有一个修补程序，工作，我给他们每个不同的身份证，并将他们加在一起！：D非常感谢！ – NaughtySquid 2014-10-02 10:18:38

建议，不要求高度的总结任何jQuery胶水：

将navbar-fixed-top更改为navbar-top，并且不要将导航栏放在.container中。
然后内容应该在之后开始navbar。（调整导航栏和利润相应内容）

来源

2014-10-02 10:09:52 fhollste

就像我对另一个删除他的答案的人说的，更改导航栏类型不是解决方案。 – NaughtySquid 2014-10-02 10:10:51

为什么呢？你不能访问的HTML？你现在几乎在改变你的引导声明与jquery ... – fhollste 2014-10-02 10:18:44

也许我想使用我很满意的导航栏类型？ – NaughtySquid 2014-10-02 10:43:15

我设法固定它得益于“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'}); 
});

来源

2014-10-02 10:21:55 NaughtySquid

bootstrap导航栏在小屏幕上的重叠内容

回答

相关问题