css - 使用响应式 Twitter Bootstrap 内容重叠水平形式的问题

Question

我花了比我愿意承认的更多的时间来修复这个愚蠢的错误。我有一个显示在某些内容左侧的表单。它在宽屏幕和窄屏幕上看起来都不错，但在平板电脑宽度上(它覆盖在 770 到 950 左右之间)右侧的内容与表单字段重叠。

我是否在标记中遗漏了某些内容以正确使用 Twitter Bootstrap，或者我是否需要使用断点添加一些自定义样式来修复它？固定像素宽度似乎导致了 bootstrap.css 中定义的问题。这些宽度属性不应该使用 % 因为我使用的是流畅的响应式布局吗？

<div class="container-narrow">
  <div class="content">
    <div class="row-fluid">
      <div class="span5">
        <form class="form-horizontal" id="applies-Step1-form" action="/" method="post">
          <div class="control-group">
            <label class="control-label required" for="Step1_email">Email <span class="required">*</span></label>
            <div class="controls">
              <input size="60" maxlength="255" name="Step1[email]" id="Step1_email" type="text" />
            </div>
          </div>

          <div class="control-group">
            <label class="control-label required" for="Step1_home_zip">Home Zip <span class="required">*</span></label>
            <div class="controls">
              <input size="5" maxlength="5" name="Step1[home_zip]" id="Step1_home_zip" type="text" />
            </div>
          </div>
        </form>
      </div>

      <div class="span7">
        <div class="promo-btm">
          <h2>Heading 2</h2>
          <ul class="checks">
            <li>Bullet One</li>
            <li>Bullet Two</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

查看随附的错误截图，或者您可以使用我的 fiddle 自己重现它.

如果有人可以帮助指出解决此问题的方法，我将不胜感激!

Answer 1

只需为您的输入元素添加一个宽度，这样它们就可以适应您所有的屏幕尺寸。您可以使用类似 .span12 的内容作为输入元素的宽度，这应该可以解决问题:

HTML

<div class="container-narrow">
  <div class="content">
    <div class="row-fluid">
      <div class="span5">
        <form class="form-horizontal" id="applies-Step1-form" action="/" method="post">
          <div class="control-group">
            <label class="control-label required" for="Step1_email">Email <span class="required">*</span></label>
            <div class="controls">
              <input class="span12" size="60" maxlength="255" name="Step1[email]" id="Step1_email" type="text" />
            </div>
          </div>

          <div class="control-group">
            <label class="control-label required" for="Step1_home_zip">Home Zip <span class="required">*</span></label>
            <div class="controls">
              <input class="span12" size="5" maxlength="5" name="Step1[home_zip]" id="Step1_home_zip" type="text" />
            </div>
          </div>
        </form>
      </div>

      <div class="span7">
        <h2>Heading 2</h2>
        <ul class="checks">
          <li>Bullet One</li>
        </ul>
      </div>
    </div>
  </div>
</div>

演示:http://jsfiddle.net/yR7Ap/18/