twitter-bootstrap 如何并排放置两个输入字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38792857/
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
How to Place Two Input Fields Side-by-Side
提问by mur7ay
I've been trying to place two input fields side-by-side for sometime now and and I can't get them to actually get inline. Here's my HTML:
一段时间以来，我一直试图并排放置两个输入字段，但我无法让它们真正内联。这是我的 HTML：
<div class="container">
<div class="form-group name1 col-md-6">
<label for="exampleInputEmail1" class="formText">FIRST NAME:*</label>
<input type="text" class="form-control" id="name" aria-describedby="emailHelp" name="muverName">
</div>
<div class="form-group name2 col-md-6">
<label for="exampleInputEmail1" class="formText">LAST NAME:*</label>
<input type="text" class="form-control" id="name" aria-describedby="emailHelp" name="muverPhone">
</div>
</div>
I'm trying to utilize Bootstrap as well, but I can't for the life of me get them to align side-by-side. Here's the corresponding CSS:
我也在尝试使用 Bootstrap，但我一生都无法让它们并排对齐。这是相应的CSS：
.name1 {
float: left;
}
.name2 {
float: right;
}
#name {
width: 223.67px;
height: 40.25px;
}
.form-group {
margin-left: 5%;
margin-right: 5%;
}
.containerr {
display: inline-block;
}
This is my output:
这是我的输出：
Whats the best way to place them side-by-side?
将它们并排放置的最佳方法是什么？
回答by Nick Bull
Bootstrap should do this for you. Looks like you're missing the <div class="row">around your columns:
Bootstrap 应该为你做这件事。看起来您缺少<div class="row">列周围的内容：
<div class="container">
<div class="row">
<div class="form-group name1 col-md-6">
<label for="exampleInputEmail1" class="formText">FIRST NAME:*</label>
<input type="text" class="form-control" id="name" aria-describedby="emailHelp" name="muverName">
</div>
<div class="form-group name2 col-md-6">
<label for="exampleInputEmail1## Heading ##" class="formText">LAST NAME:*</label>
<input type="text" class="form-control" id="name" aria-describedby="emailHelp" name="muverPhone">
</div>
</div>
</div>
回答by Artem Kolontay
Judging by the size of your output, you might need to use different column sizes. Try to set col-sm-6or col-xs-6classes. col-md-6might be to large in your case.
根据输出的大小判断，您可能需要使用不同的列大小。尝试设置col-sm-6或col-xs-6类。col-md-6在你的情况下可能会很大。
回答by Andrew Robinson
#name {
width: 223.67px;
height: 40.25px;
}
.form-group {
display: inline-block;
width: calc(50% - 1px);
padding: 0 !important;
}
.container {
display: inline-block;
width: 90%;
margin-left: 5% !important;
margin-right: 5% !important;
}
.form-control {
margin: 0 !important;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="form-group name1 col-md-6">
<label for="exampleInputEmail1" class="formText">FIRST NAME:*</label>
<input type="text" class="form-control" id="name" aria-describedby="emailHelp" name="muverName">
</div>
<div class="form-group name2 col-md-6">
<label for="exampleInputEmail1" class="formText">LAST NAME:*</label>
<input type="text" class="form-control" id="name" aria-describedby="emailHelp" name="muverPhone">
</div>
</div>The above should work on larger resolutions.
以上应该适用于更大的分辨率。
