在Bootstrap中，有三种设置控件尺寸的方法，一种是让控件成为块级元素，一种是使用相对尺寸，一种是使用网格尺寸。
1、让控件成为块级元素
如果想让控件像块级元素一样占满容器，就可以为它添加 .input-block-level 类。这样，控件不仅可以占满容器，还可以根据浏览器窗口自动调整尺寸。如：
<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。如：
<input class="input-mini" type="text" placeholder=".input-mini"><input class="input-small" type="text" placeholder=".input-small"><input class="input-medium" type="text" placeholder=".input-medium"><input class="input-large" type="text" placeholder=".input-large"><input class="input-xlarge" type="text" placeholder=".input-xlarge"><input class="input-xxlarge" type="text" placeholder=".input-xxlarge">
效果如图 3‑44所示：
图3-44 Bootstrap表单控件使用相对尺寸
3、使用网格尺寸
也可以使用 .span1 到 .span12，来基于网格设置控件大小。如：
<input class="span1" type="text" placeholder=".span1"><input class="span2" type="text" placeholder=".span2"><input class="span3" type="text" placeholder=".span3"><select class="span1">...</select><select class="span2">...</select><select class="span3">...</select>
效果如图 3‑45所示：
图3-45 Bootstrap表单控件使用网格尺寸
如果想让多个输入控件处在同一行，就可以添加 .controls-row 类。这样，Bootstrap 就会浮动控件，为控件添加适当的间距，并像 .row 类一样清除浮动。如：
<form><div class="controls"><input class="span5" type="text" placeholder=".span5"></div><div class="controls controls-row"><input class="span4" type="text" placeholder=".span4"><input class="span1" type="text" placeholder=".span1"></div><div class="controls controls-row"><input class="span3" type="text" placeholder=".span3"><input class="span2" type="text" placeholder=".span2"></div><div class="controls controls-row"><input class="span2" type="text" placeholder=".span2"><input class="span3" type="text" placeholder=".span3"></div><div class="controls controls-row"><input class="span1" type="text" placeholder=".span1"><input class="span4" type="text" placeholder=".span4"></div></form>
效果如图 3‑46所示：
图3-46 Bootstrap表单控件在一行内显示
关于作者
歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。
