Boostrap自動堆疊表單而不是替換模態。

Question

我正在嘗試設置一個帶有製表符的模式。這是用於登錄/註冊。然而，它不是在點擊時替換註冊表單，而是將其疊加在登錄表單下方。 Bootply鏈接：http://www.bootply.com/5ssZsWHIzv

任何幫助將不勝感激！

Answer 1

您的col-md-6類錯誤，您應該在標籤內容div之外嵌套兩列。我修改了代碼。

Bootply：http://www.bootply.com/fE04YpZxgN

<button class="btn btn-primary btn-sm" href="#signup" data-toggle="modal" data-target=".bs-modal-sm" style="margin-top: 10px">Sign In/Register 
</button> 


<div class="modal fade bs-modal-sm" id="signupModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content clearfix"> 
      <br> 
      <div class="bs-example bs-example-tabs"> 
       <ul id="myTab" class="nav nav-tabs"> 
        <li class="active"><a href="#signinTab" data-toggle="tab">Sign In</a></li> 
        <li class=""><a href="#signup" data-toggle="tab">Register</a></li> 
       </ul> 
      </div> 
      <div class="modal-body"> 
       <div class="col-md-6"> 
        <div id="myTabContent row" class="tab-content"> 

         <div role="tabpanel" class="tab-pane fade active in" id="signinTab"> 
          <form class="form-horizontal" id="loginForm"> 
           <fieldset> 
            <!-- Sign In Form --> 
            <!-- Text input--> 
            <div id="loginErrors"> 

            </div> 

            <div class="control-group"> 
             <label class="control-label" for="loginEmail">Email:</label> 
             <div class="controls"> 
              <input id="loginEmail" name="email" type="text" class="form-control" placeholder="username@example.com"> 
             </div> 
            </div> 

            <!-- Password input--> 
            <div class="control-group"> 
             <label class="control-label" for="passwordinput">Password:</label> 
             <div class="controls"> 
              <input id="passwordinput" name="passwordinput" class="form-control" type="password" placeholder="********"> 
             </div> 
            </div> 

            <!-- Button --> 
            <div class="control-group"> 
             <label class="control-label" for="signin"></label> 
             <div class="controls"> 
              <div class="btn-toolbar"> 
               <button id="signin" name="signin" class="btn btn-success">Sign In 
               </button> 
               <button type="button" id="closeModal" class="btn btn-default" data-dismiss="modal"> 
                Close 
               </button> 
              </div> 
             </div> 
            </div> 
           </fieldset> 
          </form> 
         </div> 
         <div role="tabpanel" class="tab-pane fade" id="signup"> 
         <form class="form-horizontal" id="signUpForm"> 
          <fieldset> 
           <!-- Sign Up Form --> 
           <div id="signUpErrors"> 

           </div> 
           <!-- Text input--> 
           <div class="control-group"> 
            <label class="control-label" for="Email">Email:</label> 
            <div class="controls"> 
             <input id="Email" name="Email" class="form-control" type="text" placeholder="example@example.com"> 
            </div> 
           </div> 

           <!-- Text input--> 
           <div class="control-group"> 
            <label class="control-label" for="userid">First Name:</label> 
            <div class="controls"> 
             <input id="firstName" name="firstName" class="form-control" type="text" placeholder="John"> 
            </div> 
           </div> 
           <div class="control-group"> 
            <label class="control-label" for="userid">Last Name:</label> 
            <div class="controls"> 
             <input id="lastName" name="lastName" class="form-control" type="text" placeholder="Smith"> 
            </div> 
           </div> 


           <!-- Password input--> 
           <div class="control-group"> 
            <label class="control-label" for="password">Password:</label> 
            <div class="controls"> 
             <input id="password" name="password" class="form-control" type="password" placeholder="********"> 
             <em>Must have atleast one number</em> 
            </div> 
           </div> 

           <!-- Text input--> 
           <div class="control-group"> 
            <label class="control-label" for="reenterpassword">Re-Enter 
             Password:</label> 
            <div class="controls"> 
             <input id="reenterpassword" class="form-control" name="reenterpassword" type="password" placeholder="********"> 
            </div> 
           </div> 
           <!-- Button --> 
           <div class="control-group"> 
            <label class="control-label" for="confirmsignup"></label> 
            <div class="controls"> 
            <div class="btn-toolbar"> 
             <button id="confirmsignup" name="confirmsignup" class="btn btn-success">Sign Up 
             </button> 
             <button type="button" id="closeModal" class="btn btn-default" data-dismiss="modal"> 
              Close 
             </button> 
            </div> 
            </div> 
           </div> 
          </fieldset> 
         </form> 
         </div> 

        </div> 
       </div> 
       <div class="col-md-6 pull-right"> 
        <a class="btn btn-block btn-social btn-facebook"> 
         <span class="fa fa-facebook"></span> Sign in with Facebook 
        </a> 

        <a class="btn btn-block btn-social btn-foursquare"> 
         <span class="fa fa-foursquare"></span> Sign in with Foursquare 
        </a> 

        <a class="btn btn-block btn-social btn-openid"> 
         <span class="fa fa-openid"></span> Sign in with OpenID 
        </a> 

        <a class="btn btn-block btn-social btn-google"> 
         <span class="fa fa-google"></span> Sign in with Google 
        </a> 

        <a class="btn btn-block btn-social btn-google"> 
         <span class="fa fa-google"></span> Sign in with Google 
        </a> 
       </div> 

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