Html 输入组内的引导按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38219032/
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 button inside input-group
提问by Boris Kozarac
How to make it so that it appears nicely after input page with same height?
如何使它在具有相同高度的输入页面后显示得很好？
<div class="input-group">
<input type="text" class="form-control"/>
<button class="input-group-addon" type="submit">
<i class="fa fa-search"></i>
</button>
</div>
Here is code http://jsfiddle.net/6mcxdjdr/The first one is original input-group, the second one is something what I am trying to have
这是代码http://jsfiddle.net/6mcxdjdr/第一个是原始输入组，第二个是我想要的东西
回答by Stephen Zeng
If you follow bootstrap's documentation:
如果您遵循引导程序的文档：
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="fa fa-search"></i>
</button>
</span>
</div>
回答by Luuk Skeur
here is my solution, using a little CSS to position the button to the right of the input field by adding position: absoluteand a z-index:
这是我的解决方案，使用一点 CSS 通过添加position: absolute和 a将按钮定位到输入字段的右侧z-index：
button.input-group-addon {
position: absolute;
right: -38px;
top: 0;
padding: 2px;
z-index: 999;
height: 34px;
width: 38px;
}
http://jsfiddle.net/6mcxdjdr/1/
http://jsfiddle.net/6mcxdjdr/1/
Another idea is to manipulate the form submit with javascript, so you dont have to create your own button but submit the form by clicking on the bootstrap span. This could be done by
$('.input-group-addon').click(function(){ $('#myform').submit(); });
另一个想法是使用 javascript 操作表单提交，因此您不必创建自己的按钮，而是通过单击引导程序跨度来提交表单。这可以通过
$('.input-group-addon').click(function(){ $('#myform').submit(); });
回答by frnt
Try this,
尝试这个，
.input-group-addon{
width:50px;
position:absolute;
margin-left:196px;
height:34px;
}
.input-group-addon > i{
text-align:center;
font-size:18px;
}
回答by ganders
Here's how I did it, I had to override some css...
这是我的做法，我不得不覆盖一些 css ......
(Bootstrap 4 Beta 2)
（引导程序 4 测试版 2）
Html
html
<div class="input-group">
<input type="search" class="form-control" placeholder="search..." />
<span class="input-group-addon input-group-addon-btn bg-white">
<button class="btn px-2" type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>
</span>
</div>
And here's the css
这是 css
#app-search .input-group-addon-btn {
padding: 0;
button {
border: none;
background: transparent;
cursor: pointer;
height: 100%;
}
}
回答by Rohit Sharma
You can also try this way
你也可以试试这个方法
<div class="input-group">
<input type="text" class="form-control search-input" />
<span class="input-group-addon">
<i class="fa fa-search"></i>
</span><span class="input-group-addon">
<i class="fa fa-refresh"></i>
</span>
</div>
.search-input {
border-right: 0;
}
.input-group-addon {
background: white;
border-left: 0;
border-right: 0;
}
.input-group-addon:last-child {
border-left: 0;
border-right: 1px solid #ccc;
}
