jquery - コンテナーをオーバーフローするブートストラップ入力

Question

Bootstrap フォームに少し問題があります。コンテナーとして span6 があり、ページのサイズが変更されるとすぐに、フォーム要素がその span6 から抜け出します。

どんな助けでも大歓迎です。これを修正する理想的な方法ではないため、スパン要素を入力に直接配置しないようにしています。また、コントロール グループ、コントロールなどにもスパンを配置しようとしました。私はこれを理解できないようです。

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