Bootstrap框架默認的表單是垂直顯示風格，但很多時候我們需要的水平表單風格（標簽居左，表單控件居右）見下圖。

在Bootstrap框架中要實現水平表單效果，必須滿足以下兩個條件：
1、在<form>元素是使用類名“form-horizontal”。
2、配合Bootstrap框架的網格系統。（網格布局會在以后的章節中詳細講解）

在<form>元素上使用類名“form-horizontal”主要有以下幾個作用：
1、設置表單控件padding和margin值。
2、改變“form-group”的表現形式，類似于網格系統的“row”。

/*源碼請查閱bootstrap.css文件第1963行~第1991行*/

.form-horizontal .control-label,
.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
padding-top: 7px;
margin-top: 0;
margin-bottom: 0;
}
.form-horizontal .radio,
.form-horizontal .checkbox {
min-height: 27px;
}
.form-horizontal .form-group {
margin-right: -15px;
margin-left: -15px;
}
.form-horizontal .form-control-static {
padding-top: 7px;
}
@media (min-width: 768px) {
.form-horizontal .control-label {
text-align: right;
  }
}
.form-horizontal .has-feedback .form-control-feedback {
top: 0;
right: 15px;
}

來看一個簡單的示例：

<form class="form-horizontal" role="form">
<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">郵箱</label>
  <div class="col-sm-10">
  <input type="email" class="form-control" id="inputEmail3" placeholder="請輸入您的郵箱地址">
  </div>
  </div>
  <div class="form-group">
  <label for="inputPassword3" class="col-sm-2 control-label">密碼</label>
  <div class="col-sm-10">
  <input type="password" class="form-control" id="inputPassword3" placeholder="請輸入您的郵箱密碼">
  </div>
  </div>
  <div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
  <div class="checkbox">
  <label>
  <input type="checkbox">記住密碼
  </label>
  </div>
  </div>
  </div>
  <div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
  <button type="submit" class="btnbtn-default">進入郵箱</button>
  </div>
</div>
</form>

運行效果如下或查看右側結果窗口：(注意：要想看到此效果，需要把鼠標移到結果窗口，單擊出現的“全屏”按鈕)