引导模式作为下拉菜单答案

【问题标题】：Bootstrap modal as dropdown引导模式作为下拉菜单
【发布时间】：2017-01-14 05:55:45
【问题描述】：

    <div id="lastcolumn" class="col-md-3">
        <ul class="nav navbar-nav pull-right">
            <li class="llogin"><a class="mlogin" data-target="#loginmodal" data-toggle="modal"><span class="glyphicon glyphicon-chevron-down pull-right"></span>Login</a></li>
                        <div class="modal" id="loginmodal" tabindex="-1">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button class="close" data-dismiss="modal">&times;</button>
                                    </div>
                                    <div class="modal-body">
                                        <form>
                                            <div class="form-group">
                                                <label for="Username">Username</label>
                                                <input type="text" name="text" class="form-control">
                                            </div>
                                            <div class="form-group">
                                                <label for="Password">Password</label>
                                                <input type="Password" name="text" class="form-control">
                                            </div>
                                        </form>
                                    </div>
                                    <div class="modal-footer">
                                        <button class="btn btn-primary" data-dismiss="modal">Close</button>
                                    </div>
                                </div>
                            </div>
                        </div>
            <li class="lsignup"><a class="msignup"><span class="glyphicon glyphicon-chevron-down pull-right"></span>Signup</a></li>
            <li class="lcart"><a class="mcart"><span class="glyphicon glyphicon-shopping-cart pull-right"></span>Item</a></li>
        </ul>
        </div>

    </div>
</div>

我想在登录下将引导模式显示为下拉菜单，目前我的模式显示在屏幕中间我必须做什么才能实现所需的行为，请帮助。enter image description here

【问题讨论】：

使用CSS 并为您的#loginmodal 位置分配正确的样式
我做了但不工作不知道怎么回事

标签： bootstrap-modal

【解决方案1】：

将.modal div 移动到您要附加模式的li 中。然后为li 定义position:relative;，为.modal 定义position:absolute;。

这是一个有效的 sn-p。我删除了.modal-backdrop 并编辑了模态的填充和边距。您可以忽略它们，因为它们与基本问题无关。

.nav.navbar-nav li{
  float:left;
}
.nav.navbar-nav li a.mlogin{
  position:relative;
}
div.modal#loginmodal{
  position:absolute;
  width:200px;
  height:300px;
  top:30px;
  left:0;
  padding:0;
  margin:0;
}
div.modal#loginmodal .modal-footer{
  padding:5px;
  margin:0;
}
div.modal#loginmodal .modal-body{
  padding:10px 20px;
  margin:0;
}
div.modal#loginmodal .modal-header{
  padding:5px 20px;
  margin:0;
}
.modal-backdrop{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
  <div id="lastcolumn" class="col-md-3">
    <ul class="nav navbar-nav pull-right">
      <li class="llogin"><a class="mlogin" data-target="#loginmodal" data-toggle="modal"><span class="glyphicon glyphicon-chevron-down pull-right"></span>Login</a>
               <div class="modal" id="loginmodal" tabindex="-1">
         <div class="modal-dialog">
           <div class="modal-content">
             <div class="modal-header">
               <button class="close" data-dismiss="modal">&times;</button>
             </div>
             <div class="modal-body">
               <form>
                 <div class="form-group">
                  <label for="Username">Username</label>
                   <input type="text" name="text" class="form-control">
                 </div>
                 <div class="form-group">
                   <label for="Password">Password</label>
                   <input type="Password" name="text" class="form-control">
                 </div>
               </form>
             </div>
             <div class="modal-footer">
               <button class="btn btn-primary" data-dismiss="modal">Close</button>
             </div>
           </div>
         </div>
       </div>
     </li>
     <li class="lsignup"><a class="msignup"><span class="glyphicon glyphicon-chevron-down pull-right"></span>Signup</a></li>
     <li class="lcart"><a class="mcart"><span class="glyphicon glyphicon-shopping-cart pull-right"></span>Item</a></li>
   </ul>
</div>

【讨论】：

谢谢 :-) 小猫你做到了。