Bootstrap Modal Comportement inattendu

Question

J'essaye de créer un modal LOGIN dans le menu DROPDOWN. Le modal fonctionne très bien jusqu'à une certaine mesure, mais -

1. il ne fermera pas quand je clique sur la zone rouge
2. il ne se ferme quand je clique sur la zone verte

Selon bootstrap docs la modal devrait fermer si je clique partout en dehors de la zone du modal

est ici le HTML

<header class = "header container-fluid navbar navbar-fixed-top navbar-inverse"> 

    <div class="container"> 
    <!-- 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" aria-expanded="false"> 
    <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 navbar-right"> 
    <li><a href="#">Anime</a></li> 
    <li><a href="#">Manga</a></li> 
    <li><a href="#">Games</a></li> 

    <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a> 
     <ul class="dropdown-menu"> 
     <li> 
      <a data-toggle="modal" data-target="#myModal" >Log-In</a> 

     </li> 
     <li><a href="#">Sign-Up</a></li> 
     <li role="separator" class="divider"></li> 
     <li><a href="#">Watch Paralax</a></li> 
     </ul> 
    </li> 
    </ul> 
</div><!-- /.navbar-collapse --> 
</div><!-- /.container-fluid --> 
</header><!-- end of header--> 

<!--START of LOGIN MODAL--> 

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

    <div class=" col-xs-offset-1 col-xs-10 col-sm-offset-1 col-sm-10 col-lg-offset-2 col-lg-8 modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
     <div class="modal-content" > 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">x</button> 
       <h3>Login</h3> 
      </div> 
      <div class="modal-body"> 
       <form method="post" action='' name="login_form"> 
       <p><input type="text" class="span3" name="eid" id="email" placeholder="Email"></p> 
       <p><input type="password" class="span3" name="passwd" placeholder="Password"></p> 

       <p><button type="submit" class="btn btn-primary">Sign in</button> 
       <a href="#">Forgot Password?</a> 
       </p> 
       </form> 
      </div> 
      <div class="modal-footer">New here? 
      <a href="#" class="btn btn-primary">Register Now, for FREE!!!</a> 
      </div> 
     </div> 
    </div> 

</div> 
</div> 
<!-- End of LOGIN MODAL --> 

est ici la photo montrant les zones

est ici la photo montrant modale

aussi, quelqu'un peut-il expliquer ce qui est ce class = span3 dans input balise. Je veux aussi rendre les champs input beaucoup plus larges avec le bootstrap seul.

Merci à l'avance :)

Answer 1

les opérations suivantes:

Retirez toutes les classes d'amorçage de la grille de modal. Par défaut, modal est centré, il n'est pas nécessaire d'utiliser des classes gird.

<div class="container"> 
    <!-- 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" aria-expanded="false"> 
    <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 navbar-right"> 
    <li><a href="#">Anime</a></li> 
    <li><a href="#">Manga</a></li> 
    <li><a href="#">Games</a></li> 

    <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a> 
     <ul class="dropdown-menu"> 
     <li> 
      <a data-toggle="modal" data-target="#myModal" >Log-In</a> 

     </li> 
     <li><a href="#">Sign-Up</a></li> 
     <li role="separator" class="divider"></li> 
     <li><a href="#">Watch Paralax</a></li> 
     </ul> 
    </li> 
    </ul> 
</div><!-- /.navbar-collapse --> 
</div><!-- /.container-fluid --> 
</header><!-- end of header--> 

<!--START of LOGIN MODAL--> 


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">x</button> 
       <h3>Login</h3> 
      </div> 
      <div class="modal-body"> 
       <form method="post" action='' name="login_form"> 
       <p><input type="text" class="span3" name="eid" id="email" placeholder="Email"></p> 
       <p><input type="password" class="span3" name="passwd" placeholder="Password"></p> 

       <p><button type="submit" class="btn btn-primary">Sign in</button> 
       <a href="#">Forgot Password?</a> 
       </p> 
       </form> 
      </div> 
      <div class="modal-footer">New here? 
      <a href="#" class="btn btn-primary">Register Now, for FREE!!!</a> 
      </div> 
     </div> 
    </div> 


<!-- End of LOGIN MODAL --> 

https://jsfiddle.net/0tnbyLx1/