Входные элементы переполняют ячейки системы сетки начальной загрузки?

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