如何使用带有.form-inline的.input-append？

Question

我是Twitter Bootstrap的新手,我开始摸索使用它.虽然框架的某些方面开始有意义,但我仍在努力处理表单样式.我正在尝试设置一个表单的几个不同部分,这些部分将具有使用样式的元素.form-inline.在一个这样的例子中,我也试图.input-append用很少的运气.

<div class="row">
    <div class="well span12">
        <div class="row">
            <div class="span12 form-inline input-append">
                <label for="assetSearch">Asset Search</label>
                <input type="search" id="assetSearch" placeholder="">
                <span class="add-on"><i class="icon-search"></i></span>
            </div>
        </div>
        <div class="row">
            <div class="span12 form-inline">
                <label for="service">Service</label>
                <input type="text" id="service" autocomplete="off" />
            </div>
        </div>
    </div>
</div>

上面的标记呈现如下:

如您所见,"资产搜索"不与表单输入内联.如果我.input-append从包含div的东西中删除该类.但是,搜索图标不再嵌入文本框中,而是嵌入文本框的右侧.

我如何.form-inline在cunjunction中使用.input-append？

Answer 1

除了s、s 或s（这可能并不详尽）之外，您不应在 a 中放入input-append（或在前面添加）任何其他内容。inputbutton.add-on

尝试将整个东西包装成 adiv.input-append并让.form-inline处理浮动：jsfiddle 上的演示

<div class="span12 form-inline">
    <label for="assetSearch">Asset Search</label>
    <div class="input-append">
        <input type="search" id="assetSearch" placeholder="" />
        <span class="add-on"><i class="icon-search"></i></span>
    </div>
</div>