如何摆脱引导标签下的小间隙？

Question

我试图创建一个使用引导的导航栏，但我似乎无法摆脱每个选项卡下方的小空间。谁能帮忙？

代码：

<nav class="navbar navbar-default" role="navigation"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">Baseline Assessment</a> 
    </div> 
    <div class="collapse navbar-collapse"> 
     <ul class="nav nav-pills nav-justified" role="tablist"> 
      <li class="active"><a href="#verifyPanel" aria-controls="verifyPanel" role="tab" data-toggle="tab">Step 1: Verification</a></li> 
      <li><a href="#parqPanel" aria-controls="parqPanel" role="tab" data-toggle="tab">Step 2: Par-Q</a></li> 
      <li><a href="#exercisePanel" aria-controls="exercisePanel" role="tab" data-toggle="tab">Step 3: Exercise History</a></li> 
      <li><a href="#decisionPanel" aria-controls="decisionPanel" role="tab" data-toggle="tab">Step 4: Decision</a></li> 
     </ul> 
    </div> 
</nav> 

感谢。

Answer 1

应用填充调整

尝试使填充足够大，你navbar-brand元件，其明确地使菜单要大，因为它相匹配的的50px高度：

.nav>li>a { 
    position: relative; 
    display: block; 
    /* Adjusting this from 10px 15px to 15px should push the rows down */ 
    padding: 15px; 
} 

你可以看到一个例子该变化如下所示：

考虑响应的实用工具类

你也可以考虑进行某种类型的菜单项的内容截断为好，因为更小的分辨率会产生一个“包装”的效果。 Bootstrap's available responsive utility classes可以帮助缓解此问题：

<ul class="nav nav-pills nav-justified" role="tablist"> 
    <li class="active"> 
     <a href="#verifyPanel" aria-controls="verifyPanel" role="tab" data-toggle="tab"> 
     <span class='hidden-sm'>Step 1: Verification</span> 
     <span class='visible-sm'>Verification</span> 
     </a> 
    </li> 
    <!-- Do this for each <li> element --> 
</ul> 

您可以see this in action here及以下证明：