Bootstrap表单控件的尺寸

控件的尺寸

在Bootstrap中，可以通过类似.input-lg的类为控件设置高度，类似.col-*的类为控件设置宽度。

1、高度尺寸

一般情况下，控件的默认高度就能满足要求。当然，你也可以为控件添加 .input-lg 类让它比默认尺寸高一点，或者添加 .input-sm 类让它比默认尺寸矮一点。如：

1. <input class="form-control input-lg" type="text" placeholder=".input-lg">
2. <input class="form-control" type="text" placeholder="Default input">
3. <input class="form-control input-sm" type="text" placeholder=".input-sm">
4. <select class="form-control input-lg">...</select>
5. <select class="form-control">...</select>
6. <select class="form-control input-sm">...</select>

效果如图 2‑68所示：

图2-68 控件的高度

对于横向表单，通过给包裹表单控件的容器添加.form-group-lg或.form-group-sm类，可以为.form-horizontal包裹的label元素和表单控件快速设置尺寸。如：

1. <form class="form-horizontal">
2.   <div class="form-group form-group-lg">
3.     <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
4.     <div class="col-sm-10">
5.       <input class="form-control" type="text" id="formGroupInputLarge">
6.     </div>
7.   </div>
8.   <div class="form-group form-group-sm">
9.     <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
10.     <div class="col-sm-10">
11.       <input class="form-control" type="text" id="formGroupInputSmall">
12.     </div>
13.   </div>
14. </form>

效果如图 2‑69所示：

图2-69 横向表单的控件尺寸

2、控件的宽度

由于输入型控件的默认宽度是父元素宽度的 100%，因此可以使用栅格系统中的列来包裹表单控件或其任何父元素，来间接的为控件设置宽度。如：

1. <div class="row">
2.   <div class="col-xs-2">
3.     <input type="text" class="form-control" placeholder=".col-xs-2">
4.   </div>
5.   <div class="col-xs-3">
6.     <input type="text" class="form-control" placeholder=".col-xs-3">
7.   </div>
8.   <div class="col-xs-4">
9.     <input type="text" class="form-control" placeholder=".col-xs-4">
10.   </div>
11. </div>

效果如图 2‑70所示：

图2-70 控件的宽度

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。