Question

我花了更多的时间来承认尝试修复这个愚蠢的错误。我有一个显示在某些内容左侧的表单。它在宽屏和窄屏幕上看起来没问题，但在平板电脑宽度上（它覆盖在770到950左右），右边的内容与表单字段重叠。

我在标记中遗漏了一些东西以正确使用Twitter Bootstrap还是我需要使用断点添加一些自定义样式来修复它？似乎固定像素宽度导致bootstrap.css中定义的问题。这些宽度属性不应该使用％，因为我使用的是流体响应布局吗？ enter image description here

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

Answer 2

其他帖子已经确定了问题的根本原因，你的表单对于具有默认bootstrap css的span5 div来说太宽了

尽管如此，它并不太难。看看这是否有帮助：http://jsfiddle.net/panchroma/FXXaZ/

我用这个CSS收紧了你的表格：

/* pull control label left */
.form-horizontal .control-label {
width:70px; /* default 160 */
}

/* pull input box left */
.form-horizontal .controls {
margin-left: 90px; /* defaul 180 */
}

/* shorten input box  */
input, textarea, .uneditable-input {
width: 180px; /* default 206 */
}

祝你好运！

Answer 3

您的表单对于.span5列来说太宽了。尝试添加以上内容：

<div class="row-fluid">
  <div class="span5">hello</div>
  <div class="span7">world</div>
</div>

并添加以下样式：

.row-fluid > div { outline: 5px solid green; }

你会明白我的意思。

内容重叠水平表单使用响应式Twitter Bootstrap

3 个答案: