html - 如何摆脱自举标签下方的小缝隙？

我正在尝试使用引导程序创建导航栏，但似乎无法摆脱每个选项卡下的小空间。有人可以帮忙吗？



码：

<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>

谢谢。

最佳答案

应用填充调整

尝试使填充足够大以匹配您的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并在下面进行演示：