Bootstrap輸入溢出容器

Question

我在Bootstrap表單中遇到了一些問題。我有一個span6作爲容器，一旦頁面被調整大小，那麼表單元素就會突破span6。

任何幫助，將不勝感激。我試圖避免將span元素直接放置在輸入上，因爲這不是解決這個問題的理想方法，我也嘗試將控件放在控件組，控件等等上。我似乎無法弄清楚這一點。

我的HTML

<div class="mainReg"> 
<div class="span6"> 
<div class="regBlock"> 
    <h3>Create an Account</h3> 
    <div style="padding: 5px 5px 10px 15px;"> 
    <p>Your journey to becoming a published author begins here! Create an account to take advantage of the free publishing services offered on FreeChristianPublishing.com.</p> 
    </div> 
    <form id="formID" onsubmit="return jQuery(this).validationEngine('validate');" method="post" action="/process.php"> 
    <div class="row-fluid"> 
    <div class="form-horizontal"> 
     <div class="control-group"> 
     <label class="control-label" for="inputEmail">First Name</label> 
     <div class="controls"> 
      <input class="validate[required]" type="text" name="first_name" id="first_name" value="" /> 
     </div> 
     </div> 
     <div class="control-group"> 
     <label class="control-label" for="inputEmail">Last Name</label> 
     <div class="controls"> 
      <input class="validate[required]" type="text" name="last_name" id="last_name" value="" /> 
     </div> 
     </div> 
     <div class="control-group"> 
     <label class="control-label" for="inputEmail">Email Address</label> 
     <div class="controls"> 
      <input class="validate[required,custom[email]]" type="text" name="email" id="email" value="" /> 
     </div> 
     </div> 
     <div class="control-group"> 
     <label class="control-label" for="inputEmail">Verify Email Address</label> 
     <div class="controls"> 
      <input class="validate[required,equals[email]]" type="text" name="email2" id="email2" value="" /> 
     </div> 
     </div> 
     <div class="control-group"> 
     <label class="control-label" for="inputEmail">Password</label> 
     <div class="controls"> 
      <input class="validate[required] minSize[6]" type="password" name="password" id="password" value="" /> 
     </div> 
     </div> 
     <div class="control-group"> 
     <label class="control-label" for="inputEmail">Verify Password</label> 
     <div class="controls"> 
      <input class="validate[required,equals[password]]" type="password" name="password2" id="password2" value="" /> 
     </div> 
     </div> 
     <div class="control-group"> 
     <div class="controls"> 
      <label class="checkbox"> 
      <input class="validate[required]" type="checkbox" id="agree_to_terms" name="agree_to_terms" value="1" <?=$CHECKED?> /> I agree to the <a href="" target="_blank">terms &amp; conditions</a> 
      </label> 
     </div> 
     <div class="controls"> 
      <label class="checkbox"> 
      <input class="validate[required]" type="checkbox" id="over_18" name="over_18" value="1" <?=$CHECKED?> /> I am over 18 years old. 
      </label> 
     </div> 
     </div> 
    </div> 
    <!--.regBlock--> 
    </div> 
    <!--.span6--> 
</div> 
<!--.mainReg--> 

http://jsfiddle.net/isherwood/N8cjB/4/

Answer 1

你已經設置列寬太窄，你什麼含。要麼設置一個更寬的列，要麼更改媒體查詢以更快地全寬，或者爲較小的屏幕尺寸縮小表單元素的大小。