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/

Answer 1

您设置的列宽对于您所包含的内容来说太窄了。要么设置一个更宽的列，要么将媒体查询更改为更快地全宽，或者使你的表单元素更小以适应更小的屏幕尺寸。