编辑 #1:在我将高度定义为 89px 后,我的移动菜单似乎位于我的内容后面。
我的移动版本导航栏出现问题。导航栏不像徽标那么高,因此当我单击它时,除非将鼠标悬停在它上面,否则不会显示我的“主页”菜单项。
以下是两期的图片:
这是我的 HTML:
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="row">
<div class="navbar-header">
<a class="navbar-brand " style="margin-top: -15px; float: left;" href="#">
<img alt="Brand" class="pull-left" style="margin-left: -15px;" src="Images/logo-resized.png">
</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Internet</a></li>
<li><a href="#">Phone</a></li>
<li><a href="#">Android TV</a></li>
<li><a href="#">Shaw Direct</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</nav>
这是我的 CSS:
.navbar-default {
background-color: #00AEFE;
}
.nav.navbar-nav li a{
color: white;
font-size: 18px;
line-height: 50px;
}
.col-xs-0 {
display: none;
}
nav {
height: 89px;
}
在Bootstrap中,
navbar-brand
有一些填充,height
的<img>
也应该由额外的CSS控制,如navbar-brand img {height:40px}
。
如果我们能看到您的实时 HTML,那就太好了。
已编辑
使用此 CSS 提供比图像高度更长的高度,例如 100 像素或更高
@media (min-width: 768px) {
.navbar-header {
height: 100px;
}
}
或 如果您不想更改
navbar-header
的高度,您可以向 navbar-toggle
按钮添加一些填充,这样它就会添加 navbar-header
的高度:
@media (min-width: 768px) {
.navbar-toggle {
padding: 33px 10px;
}
}
<a class="navbar-brand " style="margin-top: -15px; float: left;height:auto" href="#">
<img alt="Brand" class="pull-left" style="margin-left: -15px;" src="Images/logo-resized.png">
</a>
更改导航栏品牌类的高度
或
<style>
.navbar-brand img {
max-height: 40px;
width: auto;
}
</style>