我正在升级到Bootstrap 3,但我无法弄清楚如何升级我的旧输入附加。
我有这样的事情:
<div class="input-append">
<select>
<option>hi</option>
<option>hi2</option>
</select>
<span class="input-group-addon"></span>
<input type="submit" class="btn" value="valami">
</div>
在Bootstrap 3中,这是我能得到的最接近的
<div class="input-group">
<select class="form-control">
<option>hi</option>
<option>hi2</option>
</select>
<span class="input-group-addon"></span>
<input type="submit" class="form-control btn btn-default" value="valami">
</div>
如果我移除那个跨度它会变得完美,但它们在不同的行中。
知道如何正确地做到这一点吗?
答案 0 :(得分:81)
删除单数
.input-group
的input-prepend和input-append。课程 已更改内部元素,并需要更多标记才能使用 按钮:
- 使用
.input-group
作为输入和插件周围的父类。- 对于基于文本的前置/附加,请使用
.input-group-addon
代替.addon
。- 对于按钮预置/附加, 使用
.input-group-btn
并将.btn
放在该元素中。
实施例:
<div class="container">
<div class="row">
<div class="col-sm-3 col-xs-12 col-lg-3">
<form class="form-search">
<div class="input-group">
<input type="text" class="form-control " placeholder="Text input">
<span class="input-group-btn">
<button type="submit" class="btn btn-search">Search</button>
</span>
</div>
</form>
</div>
</div>
</div>
编辑:来自@kviktor和@ max4ever的工作示例: