twitter-bootstrap 引导输入组中的两个输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24629859/
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 two inputs in input-group
提问by newbie
I have following HTML, but I can't get two inputs to be on same line as all buttons.
我有以下 HTML，但我无法让两个输入与所有按钮位于同一行。
<div class="well">
<div class="input-group">
<input class="form-control" placeholder="Page path">
<input class="form-control" placeholder="Name">
<div class="input-group-btn">
<a href="#" class="btn btn-info">View</a>
<a href="#" class="btn btn-primary">Edit</a>
<a href="#" class="btn btn-danger">Delete</a></div>
</div>
</div>
采纳答案by ElwoodP
Bootstrap makes the width of those input elements 100%. You will need to overwrite that value. Something like this:
Bootstrap 使这些输入元素的宽度为 100%。您将需要覆盖该值。像这样的东西：
.input-group .form-control {
width:45%;
margin-right:5%;
}
See my bootply fork here: http://www.bootply.com/ApJNHnX5Lv
在此处查看我的 bootply 叉：http: //www.bootply.com/ApJNHnX5Lv
回答by davidkonrad
Place the entire content in a .form-inline<form>tag, and place the input and button sections in .form-group<div>'s :
将整个内容放在一个.form-inline<form>标签中，并将输入和按钮部分放在.form-group<div>'s 中：
<div class="well">
<form class="form-inline">
<div class="form-group">
<input type="password" class="form-control input-medium" id="exampleInputPassword1" placeholder="Page path">
<input type="password" class="form-control input-medium" id="exampleInputPassword1" placeholder="Name">
</div>
<div class="form-group">
<a href="#" class="btn btn-info">View</a>
<a href="#" class="btn btn-primary">Edit</a>
<a href="#" class="btn btn-danger">Delete</a>
</div>
</form>
</div>
see forked bootply -> http://www.bootply.com/xSxTb0xzqh
见分叉 bootply -> http://www.bootply.com/xSxTb0xzqh
回答by Nalaka526
Try using class form-inline
尝试使用类 form-inline
<div class="well">
<div class="form-inline">
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Page path">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Name">
<a href="#" class="btn btn-info">View</a>
<a href="#" class="btn btn-primary">Edit</a>
<a href="#" class="btn btn-danger">Delete</a>
</div>
</div>
</div>
