Javascript 移动设备的Html导航栏菜单
我的导航栏没有按我想要的方式工作,当我将浏览器调整为移动屏幕大小并单击按钮以显示链接时,链接会显示在徽标的右侧。我看过很多网站,但都没有找到答案 我的代码:Javascript 移动设备的Html导航栏菜单,javascript,jquery,html,css,navbar,Javascript,Jquery,Html,Css,Navbar,我的导航栏没有按我想要的方式工作,当我将浏览器调整为移动屏幕大小并单击按钮以显示链接时,链接会显示在徽标的右侧。我看过很多网站,但都没有找到答案 我的代码: <!DOCTYPE html> <html> <head> <title>Timmage</title> <meta charset="Utf-8"> <meta name="viewport" conten
<!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>
Timmage
-
欢迎来到Timmage!
您需要将徽标和开关包装在一个div中,其中包含一个类。导航栏标题
见plnkr-
-
-
-
-
-
-
-
你想让它们出现在哪里?谢谢你的回答,但现在我的网站看起来应该是这样的,在桌面模式下,我的链接现在位于导航栏中我的徽标下方:-(@MarcusLönnqvist my bad!我现在更新了答案,希望这有帮助,这次可以工作!太好了,谢谢你的帮助,现在可以工作了!
<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>