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

您已将列宽设置得太窄，不适合您所包含的内容。可以设置更宽的列，也可以将媒体查询更改为更快的全宽，或者使表单元素更小，以适应更小的屏幕尺寸。