我的导航栏没有按我想要的方式工作，当我将浏览器调整为移动屏幕大小并单击按钮使链接出现时，链接出现在 Logo 的右侧。我查看了很多网站，但从未找到答案。
我的代码:
<!DOCTYPE html>
<html>
<head>
<title>Timmage</title>
<meta charset="Utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<a href="index.html" class="navbar-brand"><img class="logga" src="images/Timmage.png" alt="logga"></a>
<button class="navbar-toggle" data-toggle="collapse" data-target = ".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
<a href = "#" class="dropdown-toggle" data-toggle = "dropdown">Menu<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href = "#">Profile</a></li>
<li><a href = "#">Uploads</a></li>
<li><a href = "#">Setting</a></li>
<li><a href = "#">Log out</a></li>
</ul>
</li>
<li><a href="#">Settings</a></li>
<li><a href="#">My Profile</a></li>
</ul>
</div>
</div>
</div>
<h1>Welcome to Timmage!</h1>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src = "js/bootstrap.js"></script>
</body>
</html>
最佳答案
您需要使用 .navbar-header 类将您的 Logo 和切换按钮包装在一个 div 中
查看 plnkr - https://plnkr.co/edit/sb7vJ5mMDMpO2VMPmelL?p=preview
<div class="container">
<div class="navbar-header">
<a href="index.html" class="navbar-brand">
<img class="logga" src="images/Timmage.png" alt="logga" />
</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">Profile</a>
</li>
<li>
<a href="#">Uploads</a>
</li>
<li>
<a href="#">Setting</a>
</li>
<li>
<a href="#">Log out</a>
</li>
</ul>
</li>
<li>
<a href="#">Settings</a>
</li>
<li>
<a href="#">My Profile</a>
</li>
<li></li>
</ul>
</div>
</div>
关于javascript - 用于移动设备的 Html 导航栏菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36599713/