css - 输入元素溢出引导网格系统单元？

Question

这是一个关于jsbin的例子

我正在尝试使用引导网格系统，我发现输入元素溢出了网格单元。我应该做些什么来防止这种情况发生吗？这是html：

<div class="container">
  <div class="row-fluid">
      <div class="span8"></div>
      <div class="span2">per Invoice</div>  
      <div class="span2">per LB</div>  
    </div>

    <div class="row-fluid">
      <div class="span8">
        <select>
        </select>
      </div>  
      <div class="span2">
        <input>
      </div>
      <div class="span2">
        <input>
      </div>
    </div>
</div>

我知道设置可以input,select,textarea { max-length: 100%}解决问题，但对于引导程序而言，这似乎是一个奇怪的疏忽。奇怪的是，我很可能做错了什么。

Answer 1

我想您是在问是否可以限制可以输入输入字段的字符数量。如果没有，那我道歉。这就是你要这样做的方式：

<input data-bind="" maxlength="10">

这会将可以输入到该字段的最大字符数设置为 10，或者您要输入的任何整数。

编辑：

或者如果问题是输入字段在视觉上太长，您可以执行以下操作：

<div class="container">

  <div class="row-fluid">
      <div class="span7"></div>
      <div class="span2">per Invoice</div>  
      <div class="span2 offset1">per LB</div>  
    </div>

    <div class="row-fluid">
      <div class="span7">
        <select>
          <option>Suggested Freight - <span></span></option>
          <option>Enter Freight</option>
        </select>
      </div>  
      <div class="span2">
        <input data-bind="" maxlength="10">
      </div>
      <div class="span2 offset1">
        <input data-bind="" maxlength="10">
      </div>
    </div>
</div>

这只是将其稍微隔开，并且字段保持在指定的网格内。希望这就是你要找的。

Answer 2

如果您希望您的输入适合网格，您也可以span对您的输入进行分类。

<input data-bind="" class="span12">