我是Twitter Bootstrap的新手,我开始摸索通过它的使用方式。虽然框架的某些方面开始有意义,但我仍然在努力处理表单样式。我正在尝试设置几个不同的表单部分,这些表单将使用.form-inline
进行样式化。在这种情况下,我也尝试使用.input-append
,但运气不佳。如何使用.input-append与.form-inline?
<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
并存?