我升级到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的工作示例: