Bootstrap创建表单的几种方式

• 垂直表单

默认情况下就是垂直表单，因为form-control 类的宽度为100%。

<div class="container">
	<div class="h1 text-center">垂直表单</div>
	<form>
		<div class="form-group">
			<label for="customer">客户名称</label>
			<input type="text" id="customer" class="form-control">
		</div>
		<div class="form-group">
			<label for="proDescription">產品描述</label>
			<input type="text" class="form-control" id="proDescription">
		</div>
	</form>
</div>

• 内联表单

<div class="h1 text-center">内联表单</div>
	<form class="form-inline">
		<div class="form-group">
			<label for="customer1">客户名称</label>
			<input type="text" id="customer1" class="form-control">
		</div>
		<div class="form-group ">
			<label for="proDescription1">產品描述</label>
			<input type="text" class="form-control" id="proDescription1">
		</div>
	</form>
</div>

• 水平表单 (Bootstrap 3)

只能在Bootstrap3中使用，Bootstrap 4已移除。

<div class="container">
	<div class="h1 text-center">水平表单</div>
	<form class=" form-horizontal">
		<div class="form-group">
			<label class="col-md-2" for="customer2">客户名称</label>
			<div class="col-md-10">
				<input type="text" id="customer2" class="form-control">
			</div>
		</div>
		<div class="form-group ">
			<label for="proDescription2" class="col-md-2">產品描述</label>
			<div class="col-md-10">
				<input type="text" class="form-control" id="proDescription2">
			</div>
		</div>
	</form>
</div>

• Boostrap4

I don’t know why my computer cannot input Chinese in Chinese mode, so I wanna say something about how to create horizontal form at Bootstrap 4 in English.
“My English is so poor, sorry ~”
Reference article

use form-row, it like row

<style>
	.form-row {
		margin-bottom: 1rem;
	}
</style>
	<div class="container">
		<div class="h1 text-center">Horizontal form</div>
		<form>
		  <div class="form-row">
			  <label class="col-md-2" for="customer">customer</label>
		    <div class="col-md-10">
		      <input type="text" class="form-control" placeholder="customer" id="customer">
		    </div>
		  </div>
		  <div class="form-row">
			  <label class="col-md-2" for="Description">Product Description</label>
			  <div class="col-md-10">
			    <input type="text" class="form-control" placeholder="Product Description" id="Description">
			  </div>
		  </div>
		</form>
	</div>