如何将 HTML 导航栏 <li> 变成独立按钮

Question

我正在使用 Bootstrap 创建网站，并添加了下拉功能以注册新闻通讯。

如何使该下拉菜单成为独立于导航栏的独立下拉菜单？

我在整个 html 代码周围添加了 <button> 标记，但注册按钮随后与下拉列表分离。理想情况下，它会位于下拉列表的底部。

<button class="dropdown btn">
   <a href="http://www.jquery2dotnet.com" class="dropdown-toggle" data-toggle="dropdown">Newsletter Sign Up <b class="caret"></b></a>
   <ul class="dropdown-menu" style="padding: 15px;min-width: 250px;">
      <li>
         <div class="row">
            <div class="col-md-12">
               <form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
                  <div class="form-group">
                     <label class="sr-only" for="newsletter-signup-name">Name</label>
                     <input type="email" class="form-control" id="newsletter-signup-name" placeholder="Name" required>
                  </div>
                  <div class="form-group">
                     <label class="sr-only" for="newsletter-signup-email">Email</label>
                     <input type="email" class="form-control" id="newsletter-signup-email" placeholder="Email address" required>
                  </div>
                  <div class="checkbox">
                     <label>
                     <input type="checkbox"> Remember me
                     </label>
                  </div>
                  <div class="form-group">
                     <button type="submit" class="btn btn-success btn-block">Sign Up</button>
                  </div>
               </form>
            </div>
         </div>
      </li>
      <li class="divider"></li>
   </ul>
</button>

Answer 1

只需使用div 而不是button。我认为buttons 不允许包含其他表单元素。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />

<div class="dropdown">
   <a href="http://www.jquery2dotnet.com" class="dropdown-toggle" data-toggle="dropdown">Newsletter Sign Up <b class="caret"></b></a>
   <ul class="dropdown-menu" style="padding: 15px;min-width: 250px;">
      <li>
         <div class="row">
            <div class="col-md-12">
               <form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
                  <div class="form-group">
                     <label class="sr-only" for="newsletter-signup-name">Name</label>
                     <input type="email" class="form-control" id="newsletter-signup-name" placeholder="Name" required>
                  </div>
                  <div class="form-group">
                     <label class="sr-only" for="newsletter-signup-email">Email</label>
                     <input type="email" class="form-control" id="newsletter-signup-email" placeholder="Email address" required>
                  </div>
                  <div class="checkbox">
                     <label>
                     <input type="checkbox"> Remember me
                     </label>
                  </div>
                  <div class="form-group">
                     <button type="submit" class="btn btn-success btn-block">Sign Up</button>
                  </div>
               </form>
            </div>
         </div>
      </li>
      <li class="divider"></li>
   </ul>
</div>

Answer 2

不确定为什么要将整个表单封装到按钮中。如果需要按钮，请使用按钮而不是锚点。

<div class="dropdown">
    <button class="btn dropdown-toggle" data-toggle="dropdown">Newsletter Sign Up <b class="caret"></b>
    </button>
    <ul class="dropdown-menu" style="padding: 15px;min-width: 250px;">
        <li>
            <div class="row">
                <div class="col-md-12">
                    <form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
                        <div class="form-group">
                            <label class="sr-only" for="newsletter-signup-name">Name</label>
                            <input type="email" class="form-control" id="newsletter-signup-name" placeholder="Name" required>
                        </div>
                        <div class="form-group">
                            <label class="sr-only" for="newsletter-signup-email">Email</label>
                            <input type="email" class="form-control" id="newsletter-signup-email" placeholder="Email address" required>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox">Remember me</label>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-success btn-block">Sign Up</button>
                        </div>
                    </form>
                </div>
            </div>
        </li>
        <li class="divider"></li>
    </ul>
</div>

http://jsfiddle.net/moogs/sktewe4s/