부트 스트랩을 사용하여 드롭 다운 내에서 로그인 및 로그인

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>