Bootstrap Modal意外的行爲

Question

我試圖在DROPDOWN菜單中創建一個LOGIN模式。 模態工作正常高達一定程度，但 -

1. 當我點擊紅色區域也不會關閉
2. 它關閉時，我點擊綠化面積

根據引導的文檔如果我在任何地方點擊模式的區域

這裏外模式應該關閉是在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 --> 

這裏的展示區

的PIC這裏的顯示模式

也可以有人解釋這是什麼class = span3在input標記的照片。我還想單獨使用bootstrap來使input字段更寬。

感謝提前:)

Answer 1

嘗試以下操作：

從模式中刪除所有網格自舉類。默認情況下，模式是居中的，不需要使用網格類。

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