twitter-bootstrap Bootstrap 内联文本框和搜索按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22796235/
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 inline text box and search button
提问by dmt2989
I have search input box, that I want styled with the bootstrap with the bootstrap form-control look. Problem is, I also want the search button on the same line as the search box. I thought this could be done with form-inline, but when I add class form-control to the search box, the search button gets pushed to the next line:
我有搜索输入框，我想用引导程序表单控件外观来设置引导程序的样式。问题是，我还希望搜索按钮与搜索框位于同一行。我认为这可以通过 form-inline 来完成，但是当我将 class form-control 添加到搜索框中时，搜索按钮会被推到下一行：
<div class="input-group" >
<div class="form-inline">
<input id="address" type="textbox" placeholder="City or Zipcode" class="form-control" >
<input class="btn btn-sm btn-primary" type="button" value="Search" id="addressSearch">
</div>
</div>
If I remove class="form-control" from the input textbox, the button is displayed in-line:
如果我从输入文本框中删除 class="form-control"，该按钮将内嵌显示：
How can I keep the form-contol box styling, while keeping the button inline?
如何在保持按钮内联的同时保持表单控制框样式？
回答by Cam Tullos
Try using input groups: https://getbootstrap.com/docs/4.4/components/input-group/this puts the button next to the textfield and makes it one component
尝试使用输入组：https: //getbootstrap.com/docs/4.4/components/input-group/这会将按钮放在文本字段旁边并使其成为一个组件
回答by Gareth Oakley
This answer comes from the original poster's comment:
这个答案来自原始海报的评论：
<div class="input-group">
<input id="address" type="text" placeholder="City or Zipcode" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="addressSearch">Search</button>
</span>
</div>
Bootply: http://www.bootply.com/gVSi912QEI#
Bootply：http: //www.bootply.com/gVSi912QEI#
