Bootstrap 3 – inputxs（小于sm）
我浪费了很多时间寻找一种方法来使我自己的xs大小（小于小）的input和input组， 所以这里的代码！
2014/11/14更新
Peter Butkovic将bug /请求上传到bootstrap github：
https://github.com/twbs/bootstrap/issues/15107
以下是他们的回应：
我们不会将它添加到v3中，而且我认为即使在v4中我们也不会有xsbutton，但是如果我们select保留它，我会牢记在心。
对于input较小者：
.input-xs { height: 22px; padding: 2px 5px; font-size: 12px; line-height: 1.5; /* If Placeholder of the input is moved up, rem/modify this. */ border-radius: 3px; } input组中的示例用法：
<div class="input-group"> <span class="input-group-btn"> <button class="btn btn-xs btn-success"> <i class="glyphicon glyphicon-plus"></i> </button> </span> <input type="text" class="form-control input-xs" /> <span class="input-group-btn"> <button class="btn btn-xs btn-danger"> <i class="glyphicon glyphicon-minus"></i> </button> </span> </div>
或者，你可以添加类到这样的input组：
.input-group-xs>.form-control, .input-group-xs>.input-group-addon, .input-group-xs>.input-group-btn>.btn { height: 22px; padding: 1px 5px; font-size: 12px; line-height: 1.5; }
并使用：
<div class="input-group input-group-xs"> <span class="input-group-btn"> <button class="btn btn-success"> <i class="glyphicon glyphicon-plus"></i> </button> </span> <input type="text" class="form-control" /> <span class="input-group-btn"> <button class="btn btn-danger"> <i class="glyphicon glyphicon-minus"></i> </button> </span> </div>
.input-xs { height: 22px!important; padding: 2px 5px; font-size: 12px; line-height: 1.5; border-radius: 3px; } .input-group-xs>.form-control, .input-group-xs>.input-group-addon, .input-group-xs>.input-group-btn>.btn { height: 22px; padding: 1px 5px; font-size: 12px; line-height: 1.5; }
<link href="bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-xs btn-success"> <i class="glyphicon glyphicon-plus"></i> </button> </span> <input type="text" class="form-control input-xs" /> <span class="input-group-btn"> <button class="btn btn-xs btn-danger"> <i class="glyphicon glyphicon-minus"></i> </button> </span> </div> <br/> <div class="input-group input-group-xs"> <span class="input-group-btn"> <button class="btn btn-success"> <i class="glyphicon glyphicon-plus"></i> </button> </span> <input type="text" class="form-control" /> <span class="input-group-btn"> <button class="btn btn-danger"> <i class="glyphicon glyphicon-minus"></i> </button> </span> </div>
如果您使用的是bootstrap-sass ，那么您可以利用input-size mixin：
$input-height-xs: 27px; // adjust it according to your theme. @include input-size('.input-xs', $input-height-xs, $padding-xs-vertical, $padding-xs-horizontal, $font-size-small, $line-height-small, $input-border-radius-small);
