转载

Bootstrap 控件尺寸

控件尺寸

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

您可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度。下面的实例演示了这点：

高度尺寸

创建大一些或小一些的表单控件以匹配按钮尺寸。

 <input class="form-control input-lg" type="text" placeholder=".input-lg"> <input class="form-control" type="text" placeholder="Default input"> <input class="form-control input-sm" type="text" placeholder=".input-sm">  <select class="form-control input-lg">...</select> <select class="form-control">...</select> <select class="form-control input-sm">...</select>

水平排列的表单组的尺寸

通过添加 .form-group-lg 或 .form-group-sm 类，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。

 <form class="form-horizontal" role="form">   <div class="form-group form-group-lg">     <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>     <div class="col-sm-10">       <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">     </div>   </div>   <div class="form-group form-group-sm">     <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>     <div class="col-sm-10">       <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">     </div>   </div> </form>

调整列（column）尺寸

用栅格系统中的列（column）包裹输入框或其任何父元素，都可很容易的为其设置宽度。

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