使用 Bootstrap 进行表单布局答案

【问题标题】：Form Layout with Bootstrap使用 Bootstrap 进行表单布局
【发布时间】：2015-04-06 20:56:35
【问题描述】：

我正在尝试使用 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 可以帮助我解决这些情况。我做错了什么？

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

您应该使用form-group 和form 类，以便在引导表单组件和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

【讨论】：

好了。第一个样品非常破碎。
@SajadKaruthedath - 这很接近。但是，标签和字段不是左对齐的。所以它看起来非常尴尬。同时，“联系信息”和“生日”字段之间没有垂直空间。如何让这两件事发生？

【解决方案2】：

查看有关水平表格的文档：

Bootstrap Horizontal Form Docs

你只需要调整你的标记。

应该是这样的：

<form class="form-horizontal">
  <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="inputEmail3" placeholder="Email">
    </div>
  </div>
</form>

编辑添加Demo Fiddle

【讨论】：