css - Bootstrap 2.0.2 - 输入追加空格

Question

我已经将我的 Bootstrap 版本升级到 2.0.2，并且随着这个更新，我的输入附加/附加结构的设计被破坏了。

fiddle :http://jsfiddle.net/AACwG/

2.0.2 的变更日志说:

Removed all IE7 hacks and floats from .input-prepend and .input-append, however, this requires you to ensure there is no whitespace in your code between .add-on and the input. In .input-prepend and .input-append, added ability to use add-ons on both sides when you chain the selectors.

我使用 Bootstrap 示例进行输入追加。这是来自github的代码。知道为什么它不起作用吗？

根据 bootstrap 开发人员之一的说法，问题在 2.0.2-wip 中已解决，但我没有看到解决方案。

Answer 1

它被破坏了，因为输入组只在表单的上下文中工作。当您查看 .controls 类的 css 时，您可以看到这一点，例如:

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

您可以通过添加您的类而不是 .form-horizo​​ntal 类来伪造该约束，或者简单地将您的控制组包含在其适当的容器中，如下所示:

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

固定 fiddle :http://jsfiddle.net/AACwG/2/