输入元素溢出bootstrap网格系统单元？

Question

Here is an example on 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%}可以解决问题，但这似乎是代表bootstrap的一个奇怪的疏忽。奇怪的是，我可能做错了什么。

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