我用bootstrap创建一个网站。我已经制作了这段代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Krishna Driver Services</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="webstyle.css">
</head>
<body>
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="" class="navbar-brand">
<img src="images\logo.png">
</a>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Services</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
&安培;这个css代码
.navbar-default{
min-height:160px;
}
我的折叠菜单正好出现在徽标上方。我认为这是由于导航栏宽度的变化而发生的。
答案 0 :(得分:1)
<强>更新强>
我在评论中已经明白我错过了问题的重点,所以这是真正的答案:
您必须确保,不仅导航栏,还有导航栏标题更改高度。显而易见的方法是将CSS更改为
.navbar-default, .navbar-default .navbar-header{
min-height:160px;
}
看看这个小提琴:http://jsfiddle.net/cr2frn1p/6/
我确定还有其他更优雅的解决方案,我确定我不久前在一个项目中使用过其中一个,但我目前没有时间去搜索它。如果你有兴趣,我明天可以把它包括在内。
原始帖子
对我来说很好:http://jsfiddle.net/cr2frn1p/
在这里做一些猜测:你可能指的是这样一个事实,即徽标的顶边和按钮没有完美对齐。这是因为.navbar-brand的填充量为15px而.navbar-toggle的余量为8px,只需将其添加到CSS中:
.navbar-toggle {
margin-top: 15px;
}