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

Question

我正在尝试使用bootstrap创建一个导航栏，但我似乎无法摆脱每个标签下方的小空间。有人可以帮忙吗？

代码：

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

您可以在下面看到此更改的示例：

考虑响应式实用程序类

您也可以考虑对菜单项的内容进行某种类型的截断，因为较小的分辨率会导致＆＃34;包装＆＃34;影响。 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并在下面演示：