如何使用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。