我是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>

上面的标记如下所示:

如您所见,“ Assets 搜索”不与表单输入内联。如果我从包含div的内容中删除.input-append类,请排队。但是,搜索图标不再嵌入文本框,而是嵌入文本框的右侧。

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

最佳答案

除了input-appendinputbutton之外,您不应在.add-on中放置(或添加其他内容)(这可能并不详尽)。

尝试将整个内容包装到div.input-append中,然后让.form-inline处理 float 内容: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>

关于css - 如何使用.input-append和.form-inline?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/14905113/

10-12 12:58
查看更多