css - 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 宽度属性以使其达到您喜欢的确切宽度，或者尝试将其更改为 block 级元素。

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

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

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