twitter-bootstrap Bootstrap 3 输入追加升级
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/18358083/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 input-append upgrade
提问by kviktor
I'm upgrading to Bootstrap 3, but I just can't figure out how to upgrade my old input-appends.
我正在升级到 Bootstrap 3,但我不知道如何升级我的旧输入附加。
I had something like this:
我有这样的事情:
<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>
Preview: http://bootply.com/75910
In Bootstrap 3, this is the closest I could get
在 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>
Preview: http://bootply.com/75912
If I remove that span it gets perfect, but they are in different lines.
如果我删除那个跨度,它会变得完美,但它们在不同的行中。
Any idea how to do this properly?
知道如何正确执行此操作吗?
回答by elyase
This is documented hereand 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-groupas the parent class around the input and addon.- For text based prepends/appends, use
.input-group-addoninstead of.addon.- For button prepends/appends, use
.input-group-btnand place your.btnwithin that element.
删除单数的 input-prepend 和 input-append
.input-group。里面的元素的类已经改变,需要更多的标记来使用按钮:
- 使用
.input-group周围输入和插件的父类。- 对于基于文本的前置/附加,使用
.input-group-addon代替.addon。- 对于按钮前置/附加,使用
.input-group-btn并放置.btn在该元素中。
Example:
例子:
<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>
EDIT: Working examples from @kviktor and @max4ever:
编辑:来自@kviktor 和@max4ever 的工作示例:

