我升级到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>
如果我删除那个跨度,它是完美的,但他们在不同的线。
任何想法如何正确做到这一点?
解决方法
这是记录
here和
here:
Remove input-prepend and input-append for singular
.input-group
. The classes
have changed for the elements within,and require a bit more markup to use
buttons:
- Use
.input-group
as the parent class around the input and addon.- For text based prepends/appends,use
.input-group-addon
instead of.addon
.- For button prepends/appends,
use.input-group-btn
and place your.btn
within that element.
例:
<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的工作示例: