改变Bootstrap的导航丸的高度

Question

This topic与我正在寻找的非常接近，但在几个小时之后仍然没有帮助增加目标。我只是想通过编辑原始的Bootstrap.css文件来降低bootstrap tab pill的高度。

JSFiddle

我从外部资源中删除了原始文件链接，并将原始代码放在css部分中，以便可以进行实验

<ul class="nav nav-pills" id="task_management_tab">
  <li class="active"><a data-toggle="pill" href="#tasks_private">A</a></li>
  <li><a data-toggle="pill" href="">B</a></li>
  <li><a data-toggle="pill" href="">C</a></li>
  <li><a data-toggle="pill" href="">D</a></li>
</ul>

Answer 1

对于导航丸，减少填充，如下：

.nav>li>a {
    padding-top: 5px;
    padding-bottom: 5px;
}

默认为10px

我建议不要修改实际的bootstrap css，因为它会影响其他一些东西。使用您自己的自定义类定位导航丸。

Answer 2

如果您使用的是Bootstrap 4，请尝试使用p-进行填充，或使用m-进行边距

        <li class="nav-item">
            <a class="nav-link p-2" id="pills-listado-tab" data-toggle="pill" href="#pills-listado" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
        </li>