我正在关注 this guide
我将第一段代码添加到我现有的导航栏中，然后将第二段代码添加到它所说的位置。但是，不会出现弹出登录。我的代码有什么问题？另外，我应该在哪里添加第三段代码？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SiteTitle</title>
<meta name"viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="">
<link href="css/bootstrap.css" rel="stylesheet">
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">My Site</a>
<!-- The drop down menu -->
<ul class="nav pull-right">
<li><a href="/users/sign_up">Sign Up</a></li>
<li class="divider-vertical"></li>
<li class="drop down">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a>
<div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">
<!-- Login form here -->
<form action="[YOUR ACTION]" method="post" accept-charset="UTF-8">
<input id="user_username" style="margin-bottom: 15px;" type="text" name="user[username]" size="30" />
<input id="user_password" style="margin-bottom: 15px;" type="password" name="user[password]" size="30" />
<input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
<label class="string optional" for="user_remember_me"> Remember me</label>
<input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
</form>
</div>
</li>
</ul>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#calender">Calender</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<h1>Bootstrap starter template</h1>
<p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
</div> <!-- /container -->
</body>
</html>
最佳答案
您似乎没有包含任何 javascript
您需要包含 jquery 和 bootstrap-dropdown.js(编辑为包含:)
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
第三段代码可以在 body 标签关闭之前进行(编辑后可以工作)
<script>
$(document).ready(function()
{
//Handles menu drop down
$('.dropdown-menu').find('form').click(function (e) {
e.stopPropagation();
});
});
</script>
关于html - 在 Bootstrap 中添加下拉登录，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11303589/