0

我正在使用引导程序创建两列布局。我想要第一列中的表格。当我减小容器的大小时，输入文本字段不会重新调整大小并最终脱离列。为什么输入字段会分列？

这是此行为的示例：

<div class="container-fluid">
      <div class="row-fluid">
           <div class="span4">
               <div class="well">
                   <form>
                       <input type="text" />
                   </form>
               </div>
          </div>
          <div class="span8">
             Notice how I am to the left of the well, but the input field breaks out of the well and column. And I'm overlapping with the input field!
          </div>
      </div>
  </div>

这个简单的例子显示了行为：http: //jsfiddle.net/xhHQD/1/

我正在使用铬。

4

1 回答 1

1

为了回答您的问题，文本字段将突破其父级的边界，仅仅是因为它们不能像文本那样换行。您可以覆盖 CSS width 属性以使其精确到您喜欢的宽度，或者尝试将其更改为块级元素。

要让您的字段调整大小以适应其父级，请向其添加类“input-block-level”：

<input type="text" class="input-block-level" />

在Bootstrap Base CSS页面上查看这个和更多示例。

于 2012-11-11T02:46:55.563 回答