Input elements overflow bootstrap grid system cells?

Question

Here is an example on jsbin

I am trying to use the bootstrap grid system and I'm finding that input elements oveflow the grid cells. Is there something that I'm supposed to do to prevent this? Here is the 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>

I'm aware that setting input,select,textarea { max-length: 100%} fixes the issue but it seems like an odd oversight on bootstrap's behalf. Odd enough that it's likely I'm doing something wrong.

Answer 1

I think you're asking if it's possible to limit the amount of characters that can be entered into the input field. If not, then I apologize. This is how you would do that:

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

This sets the maximum number of characters that can be input into that field to 10, or whatever integer you want to put in there.

EDIT:

Or if the problem is that the input field is visually too long, you can do the following:

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

This just spaces it out slightly and the fields stay within the specified grid. Hope this is what you were looking for.

Answer 2

If you want your inputs to fit in the grid you can give span class to your inputs as well.

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