bootstrap提供了三种表单形式，分别是
- 垂直表单（默认）
- 内联表单
- 水平表单
1.垂直表单
在<form> 中添加<div class="form-group"> 将元素包裹在 .form-group 中可以获得最好的排列，最后向文本元素添加class.form-control
设置了.form-control 的<input>、<textarea> 和 <select>元素默认宽度为 width: 100%;
<form>
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
运行结果：
2.内联表单
为 <form>元素添加.form-inline类可使其内容左对齐并且表现为 inline-block 级别的控件，在内联表单中，元素的宽度为 width: auto;
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
运行结果：
3.水平表单
在表单中添加 .form-horizontal类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。
<form class="form-horizontal">
<div class="form-group">
<label for="exampleInputName2" class="col-md-2 control-label">Name</label>
<div class="col-md-10">
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
</div>
<div class="form-group">
<label for="exampleInputEmail2" class="col-md-2 control-label">Email</label>
<div class="col-md-10">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
</div>
</div>
<button type="submit" class="btn btn-default col-md-offset-2 col-md-2">Send invitation</button>
</form>
运行结果：
