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

Posted 2023-03-06

【中文标题】使用响应式 Twitter Bootstrap 内容重叠水平表单的问题

【英文标题】：Trouble with content overlapping horizontal form using responsive Twitter Bootstrap

【发布时间】：2013-01-01 15:20:37

【问题描述】：

我花了更多的时间来尝试修复这个愚蠢的错误。我有一个显示在某些内容左侧的表单。在宽屏幕和窄屏幕上看起来都不错，但在平板电脑宽度上（它覆盖在 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 自行重现它。

如果有人可以帮助指出解决此问题的方法，我将非常感激！

【参考方案1】：

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

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

并添加以下样式：

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

你就会明白我的意思了。

【讨论】：

我明白你的意思。有没有办法使用 Bootstrap 的核心样式来解决这个问题，还是我需要编写一堆自定义 CSS，包括不同宽度的媒体样式？

另外，我不需要它给左边标签的所有空间。我也希望它们左对齐，但是当我添加水平表单类时，它会使它们右对齐。

如果你想使用 form-horizo​​ntal 你可能不得不忍受表单占用的空间量（我不是设计师，所以我假设看起来更好;-)您可以在表单元素上设置 spanX 类，但我还没有找到任何内置方法来做您想做的事情。

【参考方案2】：

只需为您的输入元素添加一个宽度，这样它们就可以响应您的所有屏幕尺寸。您可以使用 .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/

【参考方案3】：

其他帖子已查明问题的根本原因，即您的表单对于使用默认引导 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 */

祝你好运！