Bootstrap教程：如何设置表单控件大小代码是什么input-sm,input-lg-新起点博客

表单控件其实都正常的设置大小。可以通过设置控件的height，line-height，padding和font-size等属性来实现控件的高度设置。不过Bootstrap框架还提供了两个不同的类名，用来控制表单控件的高度。这两个类名是：

input-sm:让控件比正常大小更小
input-lg:让控件比正常大小更大

这两个类适用于表单中的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，控件变小">

测试代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单控件大小</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<h1>案例1</h1>
<form role="form">
  <div class="form-group">
    <label class="control-label">控件变大</label>
    <input class="form-control input-lg" type="text" placeholder="添加.input-lg，控件变大">
  </div>
  <div class="form-group">
    <label class="control-label">正常大小</label>
    <input class="form-control" type="text" placeholder="正常大小">
  </div>  
  <div class="form-group">
    <label class="control-label">控件变小</label>
    <input class="form-control input-sm" type="text" placeholder="添加.input-sm，控件变小">
  </div> 
  
</form> 
  <br>
  <br>
  <br>
 <h1>案例2</h1>
<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>
  <div class="form-group">
    <div class="col-xs-6"><input class="form-control" type="text" placeholder=".col-xs-6"></div>
    <div class="col-xs-6"><input class="form-control" type="text" placeholder=".col-xs-6"></div>
    
  </div>  
  <div class="form-group">
    <div class="col-xs-5">
      <input class="form-control input-sm" type="text" placeholder=".col-xs-5">
    </div>
    <div class="col-xs-7">
      <input class="form-control input-sm" type="text" placeholder=".col-xs-7">
    </div>
  </div> 
</form>
</body>
</html>

效果图：