Html 输入和按钮与 Bootstrap 在同一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37815260/
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
Input and button in same line with Bootstrap
提问by user1552545
I want to put an input field and a Button in the same line. I want to set fix size for the button, and and I want the form to fill the available space. I've tried to create my own solution, but unfortunately the button is lower than the input field. How can I fix this?
我想在同一行中放置一个输入字段和一个按钮。我想为按钮设置固定大小，并且我希望表单填充可用空间。我尝试创建自己的解决方案，但不幸的是按钮低于输入字段。我怎样才能解决这个问题？
CSS:
CSS：
.input-bar {
display: table;
width: 100%;
}
.input-bar-item {
display: table-cell;
}
.input-bar-item > button {
margin-left: 5px;
}
.width100 {
width: 100%;
}
HTML:
HTML：
<div class="input-bar">
<div class="input-bar-item width100">
<form>
<div class="form-group">
<input class="form-control width100">
</div>
</form>
</div>
<div class="input-bar-item">
<button class="btn btn-info">MyButton</button>
</div>
</div>
回答by Joseph Evans
There's a couple of things you can do. One is use inline forms, another is using input groups and an input-group-btn. Here is a plunkr: https://plnkr.co/edit/BNPRY0NL1G1fP7s24mFM?p=preview
你可以做几件事。一种是使用内联表单，另一种是使用输入组和input-group-btn. 这是一个 plunkr：https://plnkr.co/edit/BNPRY0NL1G1fP7s24mFM ?p =preview
My preference is the input-group-btn
我的偏好是 input-group-btn
<div class="input-group">
<input class="form-control width100">
<span class="input-group-btn">
<button class="btn btn-info">MyButton</button>
</span>
</div>
回答by SESN
Here is your answer: Group on the left Side
这是您的答案：在左侧分组
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control">
</div>
Group on the right side:
右侧分组：
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
回答by AfikDeri
You can use the "form-inline" class made by bootstrap
您可以使用 bootstrap 制作的“form-inline”类
<form class="form-inline">
<input type="text" class="form-control">
<input type="submit" value="button" class="btn btn-primary">
</form>
回答by Jamie Eltringham
You want something like this
你想要这样的东西
<div class="input-group">
<input type="text" class="form-control" >
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Submit</button>
</span>
</div>
回答by Spencer B.
According to the documentation at http://getbootstrap.com/components/#input-groups, you can do this with in house Bootstrap CSS:
根据http://getbootstrap.com/components/#input-groups上的文档，您可以使用内部 Bootstrap CSS 执行此操作：
<div class="input-group">
<input type="text" class="form-control" placeholder="Your text field..."> <-- Text field
<div class="input-group-btn">
<button type="button" class="btn btn-default">Your button</button> <-- Inline button
</div>
</div>
Hope I can help!
希望我能帮上忙！
