為了獲得一個好看的form表單空間，我們需要如下的操作：

效果圖如下：

我們首先通過form-horizontal類來指定我們的表單空間是水平排列的，即標簽和輸入框在一個水平線上，然后我們通過form-group來使得表單控件占滿整個容器的寬度，然后通過col-sm-x來指定標簽和空間各自所占的距離，之后我們添加入control-label和form-control來為標簽和輸入框添加好看的樣式。總結如下表格：

水平表單控件相關bootstrap類

form-horizontal	指定表單的展示方式是水平展示標簽與輸入框
form-group	?將?label?元素和控件包裹在?.form-group?中可以獲得最好的排列。
form-control	所有設置了?.form-control?類的?<input>、<textarea>?和?<select>?元素都將被默認設置寬度屬性為?width: 100%;
control-label	為label添加樣式
col-sm-xx	通過該格柵系統來指定各個控件的寬度
input-lg input-sm	通過該類來指定空間的高度

?

總結

以上是生活随笔為你收集整理的bootstrap 表单样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。