Bootstrap模式作为下拉列表

Question

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

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

Answer 1

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

这是一个工作片段。我删除了.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>