bootstrap導航欄在小屏幕上的重疊內容

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

我失去了一些東西很明顯，爲什麼它不可見-X工作s的導航欄？

供參考的JS代碼來自這篇文章twitter bootstrap navbar fixed top overlapping site和一些人使用它。

Answer 1

$('.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'))

Answer 2

建議，不要求高度的總結任何jQuery膠水：

• 將navbar-fixed-top更改爲navbar-top，並且不要將導航欄 放在.container中。

• 然後內容應該在之後開始navbar。 （調整導航欄和 利潤相應內容）

Answer 3

我設法固定它得益於「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'}); 
});