我正在尝试将文本字段和文本字段上方带有标签的文本字段并排显示。
<form class="form form-horizontal" action="##" method="post" id="registrationForm">
<fieldset>
<div class="form-group">
<label class="col-xs-2 control-label" for="first_name" >first name</label>
<div class="col-xs-4">
<input type="text" class="form-control" name="first_name" id="first_name" placeholder="first name" title="enter your first name if any.">
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label" for="last_name" >Last name</label>
<div class="col-xs-4">
<input type="text" class="form-control" name="last_name" id="last_name" placeholder="last name" title="enter your last name if any.">
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label" for="phone" >phone</label>
<div class="col-xs-4">
<input type="text" class="form-control" name="phone" id="phone" placeholder="enter phone" title="enter your phone number if any.">
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label" for="mobile" >mobile</label>
<div class="col-xs-4">
<input type="text" class="form-control" name="mobile" id="mobile" placeholder="enter mobile number" title="enter your mobile number if any.">
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label" for="email" >email</label>
<div class="col-xs-4">
<input type="email" class="form-control" name="email" id="email" placeholder="Email" title="enter your email.">
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label" for="password" >password</label>
<div class="col-xs-4">
<input type="password" class="form-control" name="password" id="password" placeholder="password" title="enter your password.">
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label" for="password2" >password</label>
<div class="col-xs-4">
<input type="password" class="form-control" name="password2" id="password2" placeholder="password2" title="enter your password2.">
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label"></label>
<div class="col-xs-4">
<input type="checkbox" />
<span class="lbl">User Agreement</span>
</div>
</div><br />
<div class="form-actions">
<div class="col-md-offset-2 col-md-4">
<button class="btn btn-sm btn-success" type="submit">
<i class="glyphicon glyphicon-ok-sign"></i>
Register
</button>
<button class="btn btn-sm" type="reset">
<i class="glyphicon glyphicon-repeat"></i>
Reset
</button>
</div>
</div>
</fieldset>
</form>
我正在使用Bootstrap 3，任何人都可以告诉我如何使用上面的标签并排获取文本字段。感谢。
答案 0 :(得分：1)
尝试使用display:inline-block获取div form-group。
选中此fiddle
CSS
.form-group{
display:inline-block;
width:45%; //Change as you need
}
答案 1 :(得分：0)
试试这个。
这不是最好的方式，但应该有效。试试fiddle
将此添加到您的css：
.control-label {
text-align:left !important;
}
这是html：
<form class="form form-horizontal" action="##" method="post" id="registrationForm">
<fieldset>
<div class="form-group col-xs-6">
<label class="col-xs-12 control-label" for="first_name" >first name</label>
<div class="col-xs-12">
<input type="text" class="form-control" name="first_name" id="first_name" placeholder="first name" title="enter your first name if any.">
</div>
</div>
<div class="form-group col-xs-6">
<label class="col-xs-12 control-label" for="last_name" >Last name</label>
<div class="col-xs-12">
<input type="text" class="form-control" name="last_name" id="last_name" placeholder="last name" title="enter your last name if any.">
</div>
</div>
<div class="form-group col-xs-6">
<label class="col-xs-12 control-label" for="phone" >phone</label>
<div class="col-xs-12">
<input type="text" class="form-control" name="phone" id="phone" placeholder="enter phone" title="enter your phone number if any.">
</div>
</div>
<div class="form-group col-xs-6">
<label class="col-xs-12 control-label" for="mobile" >mobile</label>
<div class="col-xs-12">
<input type="text" class="form-control" name="mobile" id="mobile" placeholder="enter mobile number" title="enter your mobile number if any.">
</div>
</div>
<div class="form-group col-xs-6">
<label class="col-xs-12 control-label" for="email" >email</label>
<div class="col-xs-12">
<input type="email" class="form-control" name="email" id="email" placeholder="Email" title="enter your email.">
</div>
</div>
<div class="form-group col-xs-6">
<label class="col-xs-12 control-label" for="password" >password</label>
<div class="col-xs-12">
<input type="password" class="form-control" name="password" id="password" placeholder="password" title="enter your password.">
</div>
</div>
<div class="form-group col-xs-6">
<label class="col-xs-12 control-label" for="password2" >password</label>
<div class="col-xs-12">
<input type="password" class="form-control" name="password2" id="password2" placeholder="password2" title="enter your password2.">
</div>
</div>
<div class="form-group col-xs-12">
<label class="col-xs-2 control-label"></label>
<div class="col-xs-4">
<input type="checkbox" />
<span class="lbl">User Agreement</span>
</div>
</div><br />
<div class="form-actions col-xs-12">
<div class="col-md-offset-2 col-md-4">
<button class="btn btn-sm btn-success" type="submit">
<i class="glyphicon glyphicon-ok-sign"></i>
Register
</button>
<button class="btn btn-sm" type="reset">
<i class="glyphicon glyphicon-repeat"></i>
Reset
</button>
</div>
</div>
</fieldset>
</form>
答案 2 :(得分：0)
将标签放在form-group内，然后从标签中删除col-xs-2：