【问题标题】：Badge increases navbar height徽章增加导航栏高度
【发布时间】：2019-08-24 02:31:17
【问题描述】：

我有以下用于引导导航栏的 HTML。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
/* Move down content because we have a fixed navbar that is 50px tall */

body {
  padding-top: 33px;
  padding-bottom: 20px;
}

.body {
  font-size: 16px;
  border-spacing: 2px;
  border-collapse: separate;
  text-align: center;
}

.body a {
  text-decoration: underline;
}

.navbar-fixed-top {
  background-color: #5b5b5b;
  min-height: 33px;
  border-style: none;
}

.navbar-toggle {
  margin-top: 2px;
  margin-bottom: 2px;
  padding-top: 7px;
  padding-bottom: 7px;
}

.navbar-nav>li>a {
  line-height: 3px;
  padding-top: 16px;
  padding-bottom: 14px;
}

div.navbar-header>img {
  height: 30px;
  margin-top: 2px;
}

.nav>li>a {
  font-size: medium;
  font-family: "Helvetica Bold", sans-serif;
  /*font-weight: bold;*/
  text-transform: uppercase;
}

.navbar-inverse .navbar-nav>li>a {
  color: #f0eed0;
}

.navbar-inverse .navbar-nav>li>a:hover {
  color: #f8dc54;
}

.nav li {
  display: inline;
}

#vugraph-menu.inprogress>a {
  color: black;
  background-color: #ecbe23;
}

#vugraph-menu.inprogress>a:hover,
#vugraph-menu.inprogress.open>a:not(:hover) {
  color: white;
}
</style>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">

    <div class="navbar-header">
      <img src="http://www.bridgebase.com/images/bbo_red.png">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div id="navbar" class="nav navbar-collapse collapse">
      <div class="container">
        <ul class="nav navbar-nav">
          <li id="vugraph-menu" class="nav-item dropdown" title="No tables in play">
            <a id="navbar-vugraph-menu-link" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Vugraph <span id="vugraph-count" class="badge badge-notify"></span></a>
            <ul class="dropdown-menu" aria-labelledby="navbar-vugraph-menu-link">
              <li class="dropdown-item"><a href="//www.bridgebase.com/v3/?vugraph=y" target="_blank">Watch</a></li>
              <li class="dropdown-item"><a href="//www.bridgebase.com/vugraph/schedule.php" target="_blank">Schedule</a></li>
            </ul>
          </li>
          <li class="nav-item"><a class="nav-link" href="//www.bridgebase.com/myhands/index.php" target="_blank">Hand Records</a></li>
          <li class="nav-item"><a class="nav-link" href="//www.bridgebase.com/points/index.php" target="_blank">Masterpoints</a></li>
          <li class="nav-item"><a class="nav-link" href="https://www.bridgebase.com/purchase/pay.php" target="_blank">BB$</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

没有徽章，这看起来像：

我有动态填充#vugraph-count 标记的JavaScript。当它有内容时，导航栏的高度会增加超过 15 个像素。 HTML 变为：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
/* Move down content because we have a fixed navbar that is 50px tall */

body {
  padding-top: 33px;
  padding-bottom: 20px;
}

.body {
  font-size: 16px;
  border-spacing: 2px;
  border-collapse: separate;
  text-align: center;
}

.body a {
  text-decoration: underline;
}

.navbar-fixed-top {
  background-color: #5b5b5b;
  min-height: 33px;
  border-style: none;
}

.navbar-toggle {
  margin-top: 2px;
  margin-bottom: 2px;
  padding-top: 7px;
  padding-bottom: 7px;
}

.navbar-nav>li>a {
  line-height: 3px;
  padding-top: 16px;
  padding-bottom: 14px;
}

div.navbar-header>img {
  height: 30px;
  margin-top: 2px;
}

.nav>li>a {
  font-size: medium;
  font-family: "Helvetica Bold", sans-serif;
  /*font-weight: bold;*/
  text-transform: uppercase;
}

.navbar-inverse .navbar-nav>li>a {
  color: #f0eed0;
}

.navbar-inverse .navbar-nav>li>a:hover {
  color: #f8dc54;
}

.nav li {
  display: inline;
}

#vugraph-menu.inprogress>a {
  color: black;
  background-color: #ecbe23;
}

#vugraph-menu.inprogress>a:hover,
#vugraph-menu.inprogress.open>a:not(:hover) {
  color: white;
}
</style>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">

    <div class="navbar-header">
      <img src="http://www.bridgebase.com/images/bbo_red.png">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div id="navbar" class="nav navbar-collapse collapse">
      <div class="container">
        <ul class="nav navbar-nav">
          <li id="vugraph-menu" class="nav-item dropdown" title="No tables in play">
            <a id="navbar-vugraph-menu-link" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Vugraph <span id="vugraph-count" class="badge badge-notify">1</span></a>
            <ul class="dropdown-menu" aria-labelledby="navbar-vugraph-menu-link">
              <li class="dropdown-item"><a href="//www.bridgebase.com/v3/?vugraph=y" target="_blank">Watch</a></li>
              <li class="dropdown-item"><a href="//www.bridgebase.com/vugraph/schedule.php" target="_blank">Schedule</a></li>
            </ul>
          </li>
          <li class="nav-item"><a class="nav-link" href="//www.bridgebase.com/myhands/index.php" target="_blank">Hand Records</a></li>
          <li class="nav-item"><a class="nav-link" href="//www.bridgebase.com/points/index.php" target="_blank">Masterpoints</a></li>
          <li class="nav-item"><a class="nav-link" href="https://www.bridgebase.com/purchase/pay.php" target="_blank">BB$</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

渲染的导航栏看起来像：

（我必须将自定义 CSS 内联到 sn-p 的 HTML 框中，否则 bootstrap.min.css 优先于自定义样式。）您需要使用“整页”选项堆栈 sn-ps 以获取未折叠的导航栏。

问题似乎与.navbar-nav>li>a 样式line-height: 3px 有关。当我删除它时，导航栏总是太高了。这用于降低导航栏高度以匹配左侧的徽标。出于某种原因，当添加徽章时，它会覆盖它（尽管它没有在 DOM 检查器中被删除）。

【问题讨论】：

能否也包含您的自定义样式？
我们有大约 170 行自定义 CSS，我正在尝试将其缩小到相关样式。

标签： css twitter-bootstrap twitter-bootstrap-3 navbar badge

【解决方案1】：

badge 没有引起问题，您可以检查下一个带有两个导航栏的示例（一个带有填充数字的徽章，另一个没有），其中两个导航栏都具有相似的 height（如 Chris Bar强>已经注意到）。所以：

1) 可能是你的一些自定义CSS有问题，在这种情况下，我建议使用检查器工具来检查你的badge或@添加了什么样式987654327@.

2) 您可以做的另一件事是检查您是否有一个结构良好的导航栏，如 Bootstrap Navbar 中所述。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">

  <!-- Brand and collapse button -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar1">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar 1</a>
  </div>

  <div id="navbar1" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li id="vugraph-menu" class="nav-item dropdown" title="No tables in play">
        <a id="navbar-vugraph-menu-link" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Vugraph
          <span id="vugraph-count" class="no-padding badge badge-notify">99</span>
        </a>
        <ul class="dropdown-menu" aria-labelledby="navbar-vugraph-menu-link">
          <li class="dropdown-item">
            <a href="//www.bridgebase.com/v3/?vugraph=y" target="_blank">Watch</a>
          </li>
          <li class="dropdown-item">
            <a href="//www.bridgebase.com/vugraph/schedule.php" target="_blank">Schedule</a>
          </li>
        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="//www.bridgebase.com/myhands/index.php" target="_blank">Hand Records</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="//www.bridgebase.com/points/index.php" target="_blank">Masterpoints</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="https://www.bridgebase.com/purchase/pay.php" target="_blank">BB$</a>
      </li>
    </ul>
  </div>

</div>
</nav>

<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">

  <!-- Brand and collapse button -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar 2</a>
  </div>

  <div id="navbar2" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li id="vugraph-menu" class="nav-item dropdown" title="No tables in play">
        <a id="navbar-vugraph-menu-link" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Vugraph
          <span id="vugraph-count" class="no-padding badge badge-notify"></span>
        </a>
        <ul class="dropdown-menu" aria-labelledby="navbar-vugraph-menu-link">
          <li class="dropdown-item">
            <a href="//www.bridgebase.com/v3/?vugraph=y" target="_blank">Watch</a>
          </li>
          <li class="dropdown-item">
            <a href="//www.bridgebase.com/vugraph/schedule.php" target="_blank">Schedule</a>
          </li>
        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="//www.bridgebase.com/myhands/index.php" target="_blank">Hand Records</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="//www.bridgebase.com/points/index.php" target="_blank">Masterpoints</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="https://www.bridgebase.com/purchase/pay.php" target="_blank">BB$</a>
      </li>
    </ul>
  </div>

</div>
</nav>

最后，我不认为更新到 Bootstrap 4 会有所帮助，事实上，您必须将整个网站移植到新版本，因为有些东西从版本 3 更改为 4 (阅读更多here)。

更新

在使用元素上应用的自定义样式更新问题后，可能的解决方案是将下一个样式添加到badge：

{line-height: 0; display: inline;}

示例：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
/* Move down content because we have a fixed navbar that is 50px tall */

#vugraph-count {
  line-height: 0;
  display: inline;
}

body {
  padding-top: 33px;
  padding-bottom: 20px;
}

.body {
  font-size: 16px;
  border-spacing: 2px;
  border-collapse: separate;
  text-align: center;
}

.body a {
  text-decoration: underline;
}

.navbar-fixed-top {
  background-color: #5b5b5b;
  min-height: 33px;
  border-style: none;
}

.navbar-toggle {
  margin-top: 2px;
  margin-bottom: 2px;
  padding-top: 7px;
  padding-bottom: 7px;
}

.navbar-nav>li>a {
  line-height: 3px;
  padding-top: 16px;
  padding-bottom: 14px;
}

div.navbar-header>img {
  height: 30px;
  margin-top: 2px;
}

.nav>li>a {
  font-size: medium;
  font-family: "Helvetica Bold", sans-serif;
  /*font-weight: bold;*/
  text-transform: uppercase;
}

.navbar-inverse .navbar-nav>li>a {
  color: #f0eed0;
}

.navbar-inverse .navbar-nav>li>a:hover {
  color: #f8dc54;
}

.nav li {
  display: inline;
}

#vugraph-menu.inprogress>a {
  color: black;
  background-color: #ecbe23;
}

#vugraph-menu.inprogress>a:hover,
#vugraph-menu.inprogress.open>a:not(:hover) {
  color: white;
}
</style>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">

    <div class="navbar-header">
      <img src="http://www.bridgebase.com/images/bbo_red.png">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div id="navbar" class="nav navbar-collapse collapse">
      <div class="container">
        <ul class="nav navbar-nav">
          <li id="vugraph-menu" class="nav-item dropdown" title="No tables in play">
            <a id="navbar-vugraph-menu-link" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Vugraph <span id="vugraph-count" class="badge badge-notify">1</span></a>
            <ul class="dropdown-menu" aria-labelledby="navbar-vugraph-menu-link">
              <li class="dropdown-item"><a href="//www.bridgebase.com/v3/?vugraph=y" target="_blank">Watch</a></li>
              <li class="dropdown-item"><a href="//www.bridgebase.com/vugraph/schedule.php" target="_blank">Schedule</a></li>
            </ul>
          </li>
          <li class="nav-item"><a class="nav-link" href="//www.bridgebase.com/myhands/index.php" target="_blank">Hand Records</a></li>
          <li class="nav-item"><a class="nav-link" href="//www.bridgebase.com/points/index.php" target="_blank">Masterpoints</a></li>
          <li class="nav-item"><a class="nav-link" href="https://www.bridgebase.com/purchase/pay.php" target="_blank">BB$</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

【讨论】：

我确实有 navbar-header DIV，只是上面没有包含它。我会检查我的自定义 CSS，看看我是否覆盖了任何东西。
@Barmar，好的，以防万一，您可以在元素上单击鼠标右键，然后选择 inspect element 来查看它们应用了哪些样式以及它们来自何处。您还可以动态禁用/启用它们，以查看它们如何影响您的元素。
我知道如何使用检查器，但我一直很难弄清楚哪个包含元素实际上是错误的样式。检查员的大量试验和错误。
我已经添加了我的 CSS，我也将问题范围缩小到 .navbar-nav>li>a { line-height: 3px; }。
#vugraph-count {line-height: 0; display: inline;} 做到了。请把它写在你的答案中，我会接受的。

【解决方案2】：

查看此快速测试，该测试可测量带有和不带有徽章的导航项目的高度。有一点区别，但不是很大。只有 0.04 像素。

您可能有其他的 CSS 干扰，使徽章有点高。如果.badge 的填充或行高变小，则两个导航项具有相同的高度。查看注释掉的 CSS 代码，取消注释这修复了这里演示中的问题

document.querySelectorAll('.nav-item').forEach((el) => {
  console.log(el.innerText + ' Height: ' + el.getBoundingClientRect().height + 'px')
});

.nav-item {
  border: 1px solid red;
}

.nav-item .badge {
  /*line-height: 90%;*/
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" />

<div id="navbar" class="nav navbar-collapse">
  <div class="container">
    <ul class="nav navbar-nav">
      
      <li class="nav-item dropdown" title="No tables in play">
        <a id="navbar-vugraph-menu-link" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">No Badge</a>
      </li>
      
      <li class="nav-item dropdown" title="No tables in play">
        <a id="navbar-vugraph-menu-link" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Has Badge <span id="vugraph-count" class="badge badge-notify">1</span></a>
      </li>
    </ul>
  </div>
</div>

【讨论】：

我已经添加了我的 CSS，我也将问题范围缩小到 .navbar-nav>li>a { line-height: 3px; }。