5

我是 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与.input-append?

4

2 回答 2

1

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

尝试将整个东西包装成一个div.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>
于 2013-02-16T00:54:12.777 回答
0

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

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

.input-prepend label, .input-append label {
    vertical-align: middle;
}
.fix-text-spacing {
    font-size: 14px;
}
于 2013-02-16T00:23:57.277 回答