讓正下方導航欄

Question

引導傳送帶目前在我的網站我用bootstrap導航欄，在屏幕上（即使在向下滾動）的頂部總是。

的正下方是我有一個是通過給頁面的頂部填充下面推再推它下面的圖像旋轉木馬。

的問題是，這多半是猜測作爲與字體大小的導航欄的高度變化，在我的高字號它重疊的旋轉木馬，但在較低的字體大小它的罰款。

有沒有辦法讓它儘量傳送帶正下方導航欄沒有間隙，如果導航欄由於更大的字體變大推下來嗎？我從來不希望存在重疊或差距。

這不是一個正常的導航欄的元素後海誓山盟會眼睜睜的問題，而是因爲這是導航欄，固定頂它使得它有點akward的。

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

代碼：

<!-- navbar --> 
<div class="col-md-12"> 
    <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> 
    <div class="container"> 
     <div class="col-md-12"> 
      <div class="row add-bottom-margin"> 
       <!-- image carousel --> 
       <div id="carousel-example-generic" 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> 
     </div> 

Answer 1

我在別處找到了答案，而不是強制特定的差距，與JS計算設定它：

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