[英]How to have side by side form fields in boostrap
I'm trying to put together side by side label/input fields but I'm unable to achieve and here is my HTML code: 我正在尝试将标签/输入字段并排放置,但无法实现,这是我的HTML代码:
<div class="col-sm-12 col-md-12">
<div class="block-flat">
<div class="header">
<h3>Horizontal Form</h3>
</div>
<div class="content">
<form class="form-horizontal data-parsley-validate" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="Name" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Address</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="Address" placeholder="Address">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">City</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="City" placeholder="City">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Country</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="Country" placeholder="Country">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="Email2" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="Password2" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox" >
<label>
<input type="checkbox" class="icheck"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">Registrer</button>
<button class="btn btn-default">Cancel</button>
</div>
</div>
</form>
</div>
</div>
</div>
Here is what it looks when I run the page: 这是运行页面时的外观:
Here is what I'm looking to achieve: 这是我想要实现的目标:
Surround elements you want in a separate divs 在单独的div中环绕所需的元素
<div class="col-md-6">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="Name" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Address</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="Address" placeholder="Address">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">City</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="City" placeholder="City">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Country</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="Country" placeholder="Country">
</div>
</div>
</div>
You need to define a width on the form-group elements. 您需要在表单组元素上定义宽度。
If you change the <div class="form-group">
to <div class="col-md-4 form-group">
. 如果将
<div class="form-group">
更改为<div class="col-md-4 form-group">
。 You will define a 3 column layout with each column containing a form grouping. 您将定义3列布局,每列包含一个表单分组。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.