2012-03-22 3 views
3

Я обновил мою версию начальной загрузки до версии 2.0.2, и с этим обновлением была нарушена конструкция моей конструкции ввода-добавления/добавления.Bootstrap 2.0.2 - input-append whitespace

Fiddle: http://jsfiddle.net/AACwG/

список изменений 2.0.2 говорит:

Удалены все Хаки IE7 и поплавки из .Входной- и перед именем .Входной-Append, однако, это требует, чтобы обеспечить в вашем коде между .add-on и входом нет пробелов. В .input-prepend и .input-append добавлена ​​возможность использования надстроек на обеих сторонах при подключении селекторов.

Я использовал пример начальной загрузки для ввода-добавления. это код из github. любая идея, почему она не работает?

в соответствии с одной из проблем bootstrap, проблема в версии 2.0.2-wip разрешена, но я не вижу решения.

ответ

4

Он не работает, потому что входные группы работают только в контексте формы. Вы можете видеть, что, когда вы смотрите на CSS для .controls класса, например:

.form-horizontal .controls { 
    margin-left: 160px; 
} 

Вы можете фальсифицировать это ограничение, добавив в своем классе вместо .form-horizontal класса или просто включая вашу контрольную группу внутри его надлежащего контейнера, как так:

<form class="form-horizontal"> 
    <div class="control-group"> 
     <label for="appendedInput" class="control-label">Appended text</label> 
     <div class="controls"> 
      <div class="input-append"> 
       <input type="text" size="16" id="appendedInput" class="span2"><span class="add-on">.00</span> 
      </div> 
      <span class="help-inline">Here's more help text</span> 
     </div> 
    </div> 
</form> 

Fixed скрипка: http://jsfiddle.net/AACwG/2/

+6

У меня была та же проблема. Мой был вызван пробелом между моим элементом ввода и диапазоном. Удаление места, как в вашем примере, исправлено. Благодаря! – agradl

+0

@ shiznit123 Спасибо, человек !! ваш комментарий спас мне жизнь! –

+0

То же самое! Все мои добавления или дополнения не будут устранять пробел. У меня была новая строка в html, после удаления проблема решена. (делает код более трудным для чтения в местах tho) – gregthegeek

0

для меня исправление было извлечь дополнительный запас-вправо на входе, что вмешалось из другой таблицы стилей в рамках Я использую (web2py).

<form class="form-horizontal"> 
     <div class="control-group"> 
      <label for="appendedInput" class="control-label">Appended text</label> 
      <div class="controls"> 
       <div class="input-append"> 
        <input type="text" size="16" id="appendedInput" class="span2" style="margin-right: 0px"><span class="add-on">.00</span> 
       </div> 
       <span class="help-inline">Here's more help text</span> 
      </div> 
     </div> 
    </form>