前面看到的表單控件都正常的大小。可以通過設(shè)置控件的height，line-height，padding和font-size等屬性來實(shí)現(xiàn)控件的高度設(shè)置。不過Bootstrap框架還提供了兩個(gè)不同的類名，用來控制表單控件的高度。這兩個(gè)類名是：
1、input-sm:讓控件比正常大小更小
2、input-lg:讓控件比正常大小更大

這兩個(gè)類適用于表單中的input，textarea和select控件，具體使用如下：

<input class="form-control input-lg" type="text" placeholder="添加.input-lg，控件變大">
<input class="form-control" type="text" placeholder="正常大小">
<input class="form-control input-sm" type="text" placeholder="添加.input-sm，控件變小">

運(yùn)行效果如下或查看右側(cè)結(jié)果窗口：

源碼請查閱bootstrap.css文件第1795~第1824行：

.input-sm {
height: 30px;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
select.input-sm {
height: 30px;
line-height: 30px;
}
textarea.input-sm,
select[multiple].input-sm {
height: auto;
}
.input-lg {
height: 46px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
select.input-lg {
height: 46px;
line-height: 46px;
}
textarea.input-lg,
select[multiple].input-lg {
height: auto;
}

從上面的源碼中不難發(fā)現(xiàn)，不管是“input-sm”還是“input-lg”僅對控件高度做了處理。但往往很多時(shí)候，我們需要控件寬度也要做一定的變化處理。這個(gè)時(shí)候就要借住Bootstrap框架的網(wǎng)格系統(tǒng)。所以你要控制表單寬度，可以像下面這樣使用：

<form role="form" class="form-horizontal">
  <div class="form-group">
  <div class="col-xs-4">
    <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
  </div>
  <div class="col-xs-4">
    <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
  </div>
  <div class="col-xs-4">
    <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
  </div>
  </div>
    …
</form>

注：網(wǎng)格布局在后面章節(jié)中會進(jìn)行詳細(xì)講解。

運(yùn)行效果如下或查看右側(cè)結(jié)果窗口：

前面介紹水平表單時(shí)說過，如果表單使用了類名“form-horizontal”，其中“form-group”就相當(dāng)于網(wǎng)格系統(tǒng)中的“row”。換句話說，如果沒有這樣做，要通過網(wǎng)格系統(tǒng)來控制表單控件寬度，就需要這樣使用：

<div class="row">
<div class="col-xs-4">
<input class="form-control input-lg" type="text" placeholder=".col-xs-4">
</div>
<div class="col-xs-4">
<input class="form-control input-lg" type="text" placeholder=".col-xs-4">
</div>
<div class="col-xs-4">
<input class="form-control input-lg" type="text" placeholder=".col-xs-4">
</div>
</div>