小编Jef*_*ows的帖子

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

我是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>
Run Code Online (Sandbox Code Playgroud)

上面的标记呈现如下:

上面标记如何呈现的屏幕截图

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

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

css twitter-bootstrap

5
推荐指数
1
解决办法
1852
查看次数

标签 统计

css ×1

twitter-bootstrap ×1