Inputfield正在突破其列（流体容器和行）

Question

我正在使用bootstrap创建两个列布局。我想要第一栏中的表格。当我减小容器的大小时，输入文本字段不会重新调整大小并最终突破列。为什么输入字段会突破列？

以下是此行为的示例：

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

我正在使用chrome。

Answer 1

要回答你的问题，文本字段将突破其父级的边界，因为它们无法像文本那样包装。您可以覆盖CSS width属性以使其达到您喜欢的精确宽度，或尝试将其转换为块级元素。

要让字段调整大小以适合其父级，请将“input-block-level”类添加到其中：

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

请在Bootstrap Base CSS页面上查看此更多示例。