twitter-bootstrap - 引导程序：附加/前置使用

Question

我正在用 Bootstrap 开发一些项目，这里还有一些其他的 css，在某个地方它会阻止引导程序附加组件（附加/挂起）。所以，我无法解决这个问题。你能帮我吗。我发现一些修复可以帮助我：

.input-prepend .add-on {
margin-right: -1px;
position:relative;
bottom:2px; 
}

但这没有帮助。

html代码的一部分

<div class="form-string clearfix">
    <dl>
        <div class="span2">
            <dt>Phone:<span style="color:#ff0000">*</span></dt>
            <dd>
                <div class="input-prepend input-append">
                <span class="add-on" >+7</span><input type="text" maxlength="10" id="phone">
                <span class="add-on "><input id="alertphone" type="checkbox" checked="checked" class="addonCheckbox"></span> 
                </div>
            </dd>
        </div>
        <div class="span2" style="position:relative; left:-2%">
            <dt>&nbsp;</dt>
            <dd>
                Send SMS
            </dd>   
        </div>
    </dl>
</div>

附加问题

Answer 1

你可以试试：

<div class="form-string clearfix">
<dl>
    <div class="span2">
        <div class="control-group">
            <label class="control-label" for="email">Phone:<span style="color:#ff0000">*</span></label>
            <div class="controls">
                <div class="input-prepend input-append">
                    <span class="add-on" >+7</span>
                    <input type="text" maxlength="10" id="phone">
                    <span class="add-on "><input id="alertphone" type="checkbox" checked="checked" class="addonCheckbox"></span>
                </div>
            </div>
        </div>
    </div>
    <div class="span2" style="position:relative; left:-2%">
        <dt>&nbsp;</dt>
        <dd>
            Send SMS
        </dd>   
    </div>
</dl>

你忘记了input-prepend和input-append吗？

同样在我看来，只使用了div标签。

重要的是，检查 Ver。3+ 新类标签：http: //goo.gl/t6GnwL