Bootstrap 2.0.2 - пробелы ввода-добавления - PullRequest
Новая
       31

Bootstrap 2.0.2 - пробелы ввода-добавления

3 голосов
/ 22 марта 2012

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

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

Список изменений для 2.0.2 гласит:

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

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

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

Ответы [ 2 ]

4 голосов
/ 22 марта 2012

Не работает, потому что входные группы работают только в контексте формы.Вы можете видеть, что когда вы смотрите на 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>

Фиксированная скрипка: http://jsfiddle.net/AACwG/2/

0 голосов
/ 19 ноября 2012

Для меня исправление заключалось в удалении добавленного поля справа от ввода, которое мешало другой таблице стилей в используемой мной структуре (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>
...