如何使用Bootstrap來適應div中的文本輸入？

Question

我使用Bootstrap創建窗體，文本輸入寬度太長。我試圖設置bootstrap.css form-control類的width = 35%，它看起來不錯，但是當我調整屏幕重疊它的其他<div>。截至目前，我已將其改回100％。它太長了，它與另一個<div>重疊。

這裏是我的代碼：

<div class="col-sm-10">  
    <div class="col-sm-12"> 
     <div class="col-sm-6"> 
      <h4>LOGIN</h4> 
      <div class="panel panel-default" style="border: solid 2px black"> 
       <div class="panel-body" style="min-height: 456px"> 
        <div class="row"> 
         <div class="container"> 
          <div class="col-sm-12"> 
           <form role="form"> 
            <div class="form-group"> 
             <h4>REGISTER</h4> 
             <p>Please login to take advantage of promotions and benefits reserved to registered users.</p> 
            </div> 

            <div class="form-group" style="margin-top: 35px"> 
             <h5>EMAIL ADDRESS* </h5> 
             <input type="text" class="form-control" /> 
            </div> 

            <div class="form-group"> 
             <h5>PASSWORD* </h5> 
             <input type="password" class="form-control" /> 
            </div> 

            <div class="form-group"> 
             <span><input type="checkbox" style="margin-top: 20px" /></span><span>&nbsp;Remember me next time</span> 
            </div> 

            <div class="form-group"> 
             <span> 
              <button type="button" class="btn btn-default" onclick="location.href='register.html'" >REGISTER NOW</button> 
             </span> 
             <span> 
              <a href="#" data-featherlight="#fl2" data-featherlight-variant="fixwidth">Forgot your password?</a> 
             </span> 
            </div> 

           </form> 

          </div> 

         </div> 
        </div> 

       </div> 

      </div> 
     </div> 

     <div class="col-sm-6"> 
      <h5>&nbsp;</h5> 
      <div class="panel panel-default" style="border: solid 2px black"> 
       <div class="panel-body" style="min-height: 456px"> 
        <h5>NEW USER</h5> 
        <div class="register-notify"> 

         <p>Register now and enjoy the benefits of My Account. Only registered users can:</p> 
         <p>- Access to your personal information through My Account</p> 
         <p>- Use the Wish List to save their favorite products</p> 
         <p>- Complete the checkout process more quickly</p> 

        </div> 

        <div style="margin-top: 150px"> 
         <input type="button" value="REGISTER NOW" class="register-button" onclick="location.href='register.html'" /> 
        </div> 
       </div> 
      </div> 
     </div> 
</div> 

Answer 1

更改類div標籤到col-sm-6。這應該做的伎倆。

<div class="container"> 
    <div class="col-sm-6"> <!--The div tag before the form--> 
     <form role="form"> 

查看演示here。