使用引导程序在下拉菜单中注册和登录

Question

我在收件箱中显示登录菜单时遇到问题，因为它的宽度太小。 我也尝试更改bootstrap.css文件，但没有任何作品。我只是想增加下拉框的大小。请告诉是否还有其他方法。 my fiidle

<li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> 
        <ul class="dropdown-menu" role="menu"> 

      <a class="dropdown-toggle" href="#" data-toggle="dropdown" id="navLogin">Login</a> 

       <div class="container"> 
    <div class="row"> 

    <div class="main"> 

     <h3>Please Log In, or <a href="#">Sign Up</a></h3> 
     <div class="row"> 
     <div class="col-xs-6 col-sm-6 col-md-6"> 
      <a href="#" class="btn btn-lg btn-primary btn-block">Facebook</a> 
     </div> 
     <div class="col-xs-6 col-sm-6 col-md-6"> 
      <a href="#" class="btn btn-lg btn-info btn-block">Google</a> 
     </div> 
     </div> 
     <div class="login-or"> 
     <hr class="hr-or"> 
     <span class="span-or">or</span> 
     </div> 

     <form role="form"> 
     <div class="form-group"> 
      <label for="inputUsernameEmail">Username or email</label> 
      <input type="text" class="form-control" id="inputUsernameEmail"> 
     </div> 
     <div class="form-group"> 
      <a class="pull-right" href="#">Forgot password?</a> 
      <label for="inputPassword">Password</label> 
      <input type="password" class="form-control" id="inputPassword"> 
     </div> 
     <div class="checkbox pull-right"> 
      <label> 
      <input type="checkbox"> 
      Remember me </label> 
     </div> 
     <button type="submit" class="btn btn btn-primary"> 
      Log In 
     </button> 
     </form> 

    </div> 

    </div> 
</div> 
      </li> 

Answer 1

试试这个：

DEMO

但愿这有用

<nav class="navbar navbar-default" role="navigation"> 
      <div class="container-fluid"> 
       <!-- Brand and toggle get grouped for better mobile display --> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <a class="navbar-brand" href="#">Brand</a> 
       </div> 

       <!-- Collect the nav links, forms, and other content for toggling --> 
       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
        <ul class="nav navbar-nav"> 
         <li class="active"><a href="#">Link</a></li> 
         <li><a href="#">Link</a></li> 
         <li class="dropdown"> 
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> 
          <ul class="dropdown-menu" role="menu"> 
           <li><a class="dropdown-toggle" href="#" data-toggle="dropdown" id="navLogin">Login</a> 
           </li> 
           <div class="container"> 
            <div class="row"> 

             <div class="main"> 

              <h3>Please Log In, or <a href="#">Sign Up</a></h3> 
              <div class="row"> 
               <div class="col-xs-6 col-sm-6 col-md-6"> 
                <a href="#" class="btn btn-lg btn-primary btn-block">Facebook</a> 
               </div> 
               <div class="col-xs-6 col-sm-6 col-md-6"> 
                <a href="#" class="btn btn-lg btn-info btn-block">Google</a> 
               </div> 
              </div> 
              <div class="login-or"> 
               <hr class="hr-or" /> 
               <span class="span-or">or</span> 
              </div> 

              <form role="form"> 
               <div class="form-group"> 
                <label for="inputUsernameEmail">Username or email</label> 
                <input type="text" class="form-control" id="inputUsernameEmail"> 
               </div> 
               <div class="form-group"> 
                <a class="pull-right" href="#">Forgot password?</a> 
                <label for="inputPassword">Password</label> 
                <input type="password" class="form-control" id="inputPassword"> 
               </div> 
               <div class="checkbox pull-right"> 
                <label> 
                 <input type="checkbox"> 
                 Remember me 
                </label> 
               </div> 
               <button type="submit" class="btn btn btn-primary"> 
                Log In 
               </button> 
              </form> 

             </div> 

            </div> 
           </div> 
          </ul> 
         </li> 
        </ul> 
       </div> 
       <!-- /.navbar-collapse --> 
      </div> 
      <!-- /.container-fluid --> 
     </nav>