Html Bootstrap 3：如何在一行上获得两个表单输入，在单行上获得其他输入？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22888298/
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 3: How to get two form inputs on one line and other inputs on individual lines?
提问by fat fantasma
I trying to format my registration page with Bootstrap 3.1.1. I would like the first two inputs to be on the same line while the other inputs are one there own line. I have played around with the bootstrap classes "row", "form-inline", and "form-horizontal" to no avail.
我尝试使用 Bootstrap 3.1.1 格式化我的注册页面。我希望前两个输入在同一行上，而其他输入在同一行上。我玩过引导类“row”、“form-inline”和“form-horizontal”都无济于事。
Does anybody know how to do it?
有人知道怎么做吗？
Here is the Fiddle
这是小提琴
<style>
.reg_name {
max-width:200px;
}
</style>
<form name="registration_form" id='registration_form' class="form-inline">
<div class="form-group">
<label for="firstname" class="sr-only"></label>
<input id="firstname" class="form-control input-group-lg reg_name" type="text" name="firstname"
title="Enter first name"
placeholder="First name"/>
</div>
<div class="form-group">
<label for="lastname" class="sr-only"></label>
<input id="lastname" class="form-control input-group-lg reg_name" type="text" name="lastname"
title="Enter last name"
placeholder="Last name"/>
</div>
<div class="form-group">
<label for="username" class="sr-only"></label>
<input id="username" class="form-control input-group-lg" type="text" autocapitalize='off' name="username"
title="Enter username"
placeholder="Username"/>
</div>
<div class="form-group">
<label for="password" class="sr-only"></label>
<input id="password" class="form-control input-group-lg" type="password" name="password"
title="Enter password"
placeholder="Password"/>
</div>
</form>
回答by Core972
Use <div class="row">and <div class="form-group col-xs-6">
使用<div class="row">和<div class="form-group col-xs-6">
Here a fiddle :https://jsfiddle.net/core972/SMkZV/2/
这里有一个小提琴：https: //jsfiddle.net/core972/SMkZV/2/
回答by Zim
You can wrap the inputs in col-*classes
您可以将输入包装在col-*类中
<form name="registration_form" id="registration_form" class="form-horizontal">
<div class="form-group">
<div class="col-sm-6">
<label for="firstname" class="sr-only"></label>
<input id="firstname" class="form-control input-group-lg reg_name" type="text" name="firstname" title="Enter first name" placeholder="First name">
</div>
<div class="col-sm-6">
<label for="lastname" class="sr-only"></label>
<input id="lastname" class="form-control input-group-lg reg_name" type="text" name="lastname" title="Enter last name" placeholder="Last name">
</div>
</div><!--/form-group-->
<div class="form-group">
<div class="col-sm-12">
<label for="username" class="sr-only"></label>
<input id="username" class="form-control input-group-lg" type="text" autocapitalize="off" name="username" title="Enter username" placeholder="Username">
</div>
</div><!--/form-group-->
<div class="form-group">
<div class="col-sm-12">
<label for="password" class="sr-only"></label>
<input id="password" class="form-control input-group-lg" type="password" name="password" title="Enter password" placeholder="Password">
</div>
</div><!--/form-group-->
</form>
回答by Suwarnakumar Kanapathipillai
You can code like two input box inside one div
您可以在一个 div 内编码两个输入框
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input style="width:50% " class="form-control " placeholder="first name" name="firstname" type="text" />
<input style="width:50% " class="form-control " placeholder="lastname" name="lastname" type="text" />
</div>
回答by Jacques Amar
I resorted to creating 2 style cascades using inline-block for input that pretty much override the field:
我使用 inline-block 为几乎覆盖该字段的输入创建了 2 个样式级联：
.input-sm {
height: 2.1em;
display: inline-block;
}
and a series of fixed sizes as opposed to %
和一系列固定大小而不是 %
.input-10 {
width: 10em;
}
.input-32 {
width: 32em;
}
