让正下方导航栏

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