css - 使用 Bootstrap 的表单布局

Question

我正在尝试使用 Bootstrap 3 设计一个表单。我的表单被分成几组。例如，我的表单如下所示:

[h4]Personal Info[/h4]
First Name  [text field   ]
Last Name   [text field   ]
Birthday    [date field   ]

[h4]Contact Info[/h4]
Email Address  [text field   ]
Phone Number   [text field   ]

在尝试创建此表单时，我有以下代码:

<h4>Personal Info</h4>
<label class="col-sm-4 control-label" for="FirstName">First Name</label>
<div class="col-sm-8">
  <input class="form-control input-sm" id="firstName" name="FirstName" type="text" value="">
</div>
<label class="col-sm-4 control-label" for="LastName">Last Name</label>
<div class="col-sm-8">
  <input class="form-control input-sm" id="lastName" name="LastName" type="text" value="">
</div>
<label class="col-sm-4 control-label" for="Birthday">Birthday</label>
<div class="col-sm-8">
  <input class="form-control input-sm" id="Birthday" name="Birthday" type="text" value="">
</div>

<h4>Contact Info</h4>
<label class="col-sm-4 control-label" for="EmailAddress">Email Address</label>
<div class="col-sm-8">
  <input class="form-control input-sm" id="emailAddress" name="EmailAddress" type="text" value="">
</div>

<label class="col-sm-4 control-label" for="PhoneNumber">Phone number</label>
<div class="col-sm-8">
  <input class="form-control input-sm" id="phoneNumber" name="PhoneNumber" type="text" value="">
</div>

当我运行这段代码时，我的表单出现了几个问题: 1. 组之间没有填充或边距。 2.标签没有左对齐。此外，它们与行的底部垂直对齐，而不是与输入字段垂直居中。

不幸的是，我不擅长 CSS。我以为我 Bootstrap 会帮助我解决这些情况。我做错了什么？

Answer 1

你应该使用类 form-group 和 form 来更好地对齐 Bootstrap 表单组件和 form-control 类

像这样

<div class="container">
<form class="form-horizontal">
<h4>Personal Info</h4>  
<div class="form-group">
<label class="col-sm-4 control-label" for="FirstName">First Name</label>
<div class="col-sm-8">
  <input class="form-control input-sm" id="firstName" name="FirstName" type="text" value="">
</div>
  </div>
<div class="form-group">  
<label class="col-sm-4 control-label" for="LastName">Last Name</label>
<div class="col-sm-8">
  <input class="form-control input-sm" id="lastName" name="LastName" type="text" value="">
</div>
  </div>
  <div class="form-group">
<label class="col-sm-4 control-label" for="Birthday">Birthday</label>
<div class="col-sm-8">
  <input class="form-control input-sm" id="Birthday" name="Birthday" type="text" value="">
</div>
  </div>

<h4>Contact Info</h4>
  <div class="form-group">
<label class="col-sm-4 control-label" for="EmailAddress">Email Address</label>
<div class="col-sm-8">
  <input class="form-control input-sm" id="emailAddress" name="EmailAddress" type="text" value="">
</div>
  </div>
<div class="form-group">
<label class="col-sm-4 control-label" for="PhoneNumber">Phone number</label>
<div class="col-sm-8">
  <input class="form-control input-sm" id="phoneNumber" name="PhoneNumber" type="text" value="">
</div>
  </div>
</form>
</div>

Bootply DEMO

请阅读bootstrap form documentation