徽章增加导航栏高度
Badge increases navbar height
我有以下 HTML 用于 bootstrap 导航栏。
<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>
没有徽章看起来像:
我有 JavaScript 动态填充 #vugraph-count 徽章。当它有内容时,导航栏的高度增加超过 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 内嵌在代码段的 HTML 框中,否则 bootstrap.min.css
会优先于自定义样式。)您需要使用堆栈片段的 "Full page" 选项来获取未折叠的导航栏。
问题似乎与 .navbar-nav>li>a
样式 line-height: 3px
有关。当我删除它时,导航栏总是太高。这用于降低导航栏高度以匹配左侧的徽标。出于某种原因,当添加徽章时,它会覆盖它(尽管它没有在 DOM 检查器中被删除)。
查看此快速测试,该测试测量带有和不带有徽章的导航项的高度。有一点差别,但差别不大。只有 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>
badge
没有引起问题,您可以检查下一个带有两个导航栏的示例(一个带有带有数字的徽章,另一个没有),两者都具有相似的 height
(如 Chris Bar 已经注意到了)。所以:
1)可能是你的一些自定义的问题CSS
,这种情况建议使用inspector工具查看添加了什么样式到您的 badge
或 navbar
.
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
不会有帮助,事实上,您必须将整个站点移植到新版本,因为从版本 [=19= 开始有一些变化] 到 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>
我有以下 HTML 用于 bootstrap 导航栏。
<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>
没有徽章看起来像:
我有 JavaScript 动态填充 #vugraph-count 徽章。当它有内容时,导航栏的高度增加超过 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 内嵌在代码段的 HTML 框中,否则 bootstrap.min.css
会优先于自定义样式。)您需要使用堆栈片段的 "Full page" 选项来获取未折叠的导航栏。
问题似乎与 .navbar-nav>li>a
样式 line-height: 3px
有关。当我删除它时,导航栏总是太高。这用于降低导航栏高度以匹配左侧的徽标。出于某种原因,当添加徽章时,它会覆盖它(尽管它没有在 DOM 检查器中被删除)。
查看此快速测试,该测试测量带有和不带有徽章的导航项的高度。有一点差别,但差别不大。只有 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>
badge
没有引起问题,您可以检查下一个带有两个导航栏的示例(一个带有带有数字的徽章,另一个没有),两者都具有相似的 height
(如 Chris Bar 已经注意到了)。所以:
1)可能是你的一些自定义的问题CSS
,这种情况建议使用inspector工具查看添加了什么样式到您的 badge
或 navbar
.
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
不会有帮助,事实上,您必须将整个站点移植到新版本,因为从版本 [=19= 开始有一些变化] 到 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>