在Bootstrap中，有三种设置控件尺寸的方法，一种是让控件成为块级元素，一种是使用相对尺寸，一种是使用网格尺寸。

1、让控件成为块级元素

如果想让控件像块级元素一样占满容器，就可以为它添加 .input-block-level 类。这样，控件不仅可以占满容器，还可以根据浏览器窗口自动调整尺寸。如：

1. <input class="input-block-level" type="text" placeholder=".input-block-level">

效果如图 3‑43所示：

图3-43 Bootstrap表单控件成为块级元素

2、使用相对尺寸

Bootstrap提供了 5 个相对尺寸的类，来设置控件的尺寸。按从小到大的顺序依次为：input-mini、input-small、input-medium、.input-large、input-xlarge、input-xxlarge。如：

1. <input class="input-mini" type="text" placeholder=".input-mini">
2. <input class="input-small" type="text" placeholder=".input-small">
3. <input class="input-medium" type="text" placeholder=".input-medium">
4. <input class="input-large" type="text" placeholder=".input-large">
5. <input class="input-xlarge" type="text" placeholder=".input-xlarge">
6. <input class="input-xxlarge" type="text" placeholder=".input-xxlarge">

效果如图 3‑44所示：

图3-44 Bootstrap表单控件使用相对尺寸

3、使用网格尺寸

也可以使用 .span1 到 .span12，来基于网格设置控件大小。如：

1. <input class="span1" type="text" placeholder=".span1">
2. <input class="span2" type="text" placeholder=".span2">
3. <input class="span3" type="text" placeholder=".span3">
4. <select class="span1">
5.   ...
6. </select>
7. <select class="span2">
8.   ...
9. </select>
10. <select class="span3">
11.   ...
12. </select>

效果如图 3‑45所示：

图3-45 Bootstrap表单控件使用网格尺寸

如果想让多个输入控件处在同一行，就可以添加 .controls-row 类。这样，Bootstrap 就会浮动控件，为控件添加适当的间距，并像 .row 类一样清除浮动。如：

1. <form>
2.   <div class="controls">
3.     <input class="span5" type="text" placeholder=".span5">
4.   </div>
5.   <div class="controls controls-row">
6.     <input class="span4" type="text" placeholder=".span4">
7.     <input class="span1" type="text" placeholder=".span1">
8.   </div>
9.   <div class="controls controls-row">
10.     <input class="span3" type="text" placeholder=".span3">
11.     <input class="span2" type="text" placeholder=".span2">
12.   </div>
13.   <div class="controls controls-row">
14.     <input class="span2" type="text" placeholder=".span2">
15.     <input class="span3" type="text" placeholder=".span3">
16.   </div>
17.   <div class="controls controls-row">
18.     <input class="span1" type="text" placeholder=".span1">
19.     <input class="span4" type="text" placeholder=".span4">
20.   </div>
21. </form>    

效果如图 3‑46所示：

图3-46 Bootstrap表单控件在一行内显示