我是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-append
,input
或button
之外,您不应在.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/