如何使用带有.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>

以上标记呈现如下：

正如您所看到的，“资产搜索”与表单输入不一致。如果我从包含div的东西中删除.input-append类。但是，搜索图标不再嵌入文本框中，而是嵌入文本框的右侧。

如何在与.form-inline的结合使用.input-append？

Answer 1

除了input-append，input或button之外，您不应该放在.add-on（或前置）之内（这可能不是详尽无遗的）。< / p>

尝试将整个内容包装到div.input-append中，让.form-inline处理浮动内容：Demo on 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>

Answer 2

这是一个工作对齐的小提琴：http://jsfiddle.net/Jeff_Meadows/xGRtL/

两个修复方法是在vertical-align个元素的元素内设置<label>个.input-append元素，并将元素的font-size重置为14px（将其设置为0在bootstrap的其他地方）。我创建了一个可以添加到包含元素的新类，而不是基于.input-append创建规则。这样，你就不会在其他地方得到意想不到的结果。

.input-prepend label, .input-append label {
    vertical-align: middle;
}
.fix-text-spacing {
    font-size: 14px;
}