13-表单在一行内(内联表单)

所有的表单元素都在一行。

.form-inline 样式可以使得我们的元素在一行内显示。

用法就是给我们的form加上 form-inline 类:

<form class="form-inline">
  <div class="form-group">
	<label for="exampleInputName2">姓名</label>
	<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
	<label for="exampleInputEmail2">邮箱</label>
	<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">发送</button>
</form>Code language: JavaScript (javascript)

如果我们希望表单元素在水平方向上面排列,可以设置form的样式为:

<form class="form-horizontal">Code language: JavaScript (javascript)

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注