Question

我正在关注this guide

我将第一段代码添加到我现有的导航栏中，然后将第二段代码添加到它所说的位置。但是，弹出登录不会出现。我的代码有什么问题？另外，我在哪里添加第3段代码？

<!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>

Answer 1

您似乎没有包含任何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>

在bootstrap中添加下拉登录

1 个答案: