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

Answer 2

只需使用div代替button即可。我认为button不允许包含其他表单元素。

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

如何将HTML导航栏<li>转换为独立按钮

2 个答案: