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

Вот пример на 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%} решает проблему, но это кажется странным упущением со стороны бутстрапа. Странно, скорее всего я что-то не так делаю.


css twitter-bootstrap grid-system
person George Mauer    schedule 19.08.2013    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я думаю, вы спрашиваете, можно ли ограничить количество символов, которые можно ввести в поле ввода. Если нет, то прошу прощения. Вот как вы это сделаете:

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

Это просто немного расширяет его, и поля остаются в пределах указанной сетки. Надеюсь, это то, что вы искали.

person MitulP91    schedule 19.08.2013
comment
Нет, это совсем не то, о чем я спрашиваю. Я спрашиваю, почему мои элементы ввода переполняют систему сетки начальной загрузки? Это по дизайну? Установка maxlength 1) ограничит длину моего ввода (чего я не хочу) и 2) все равно вызовет переполнение ввода, когда экран достаточно мал по ширине. - person George Mauer; 19.08.2013

arrow_upward
0
arrow_downward

Если вы хотите, чтобы ваши входные данные соответствовали сетке, вы также можете присвоить своим входным данным класс span.

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

person nyzm    schedule 19.08.2013