改变Bootstrap的导航丸的高度

Question

这个话题与我正在寻找的内容非常接近,但在几个小时之后仍然没有帮助丰富目标.我只是想通过编辑原始的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,因为它会影响其他一些东西.使用您自己的自定义类定位导航丸.