Bootstrap 3input附加升级
我升级到Bootstrap 3,但我不知道如何升级我的旧的input附加。
我有这样的事情:
<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>
预览: http : //bootply.com/75910
在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>
预览: http : //bootply.com/75912
如果我删除这个跨度,它会变得完美,但它们是不同的。
任何想法如何正确地做到这一点?
这是在这里和这里logging :
删除单数
.input-group
input-prepend和input-append。 类中的元素已经改变了,并且需要更多的标记来使用button:
- 使用
.input-group
作为input和插件的父类。- 对于基于文本的prepends /
.input-group-addon
,使用.input-group-addon
而不是.addon
。- 对于buttonprepends /
.input-group-btn
,使用.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工作示例: