Question

我已将自举版本升级到2.0.2，并且在此更新中，我的input-append / add-on构造的设计已损坏。

2.0.2的更改日志说：

从.input-prepend和。删除了所有IE7黑客和浮动 .input-append，但是，这需要你确保没有代码中的空格.add-on和输入之间的空格。在 .input-prepend和.input-append，增加了在两者上使用附加组件的能力链接选择器时的边。

我使用bootstrap示例进行input-append。这是来自github的代码。知道为什么它不起作用吗？

根据其中一个bootstrap dev的问题是在2.0.2-wip解决，但我没有看到解决方案。

Answer 1

它被破坏是因为输入组仅在表单的上下文中工作。当您查看.controls类的css时，您可以看到，例如：

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

Answer 2

对我来说，解决方法是删除输入上添加的margin-right，这会干扰我使用的框架中的另一个样式表（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>

Bootstrap 2.0.2 - 输入附加空格

2 个答案: