css - Bootstrap 3 中的 input-group-addon 小于 input-group-sm 选项

Question

在 bootstrap 3 中，我想创建一个比 input-group-sm 选项更小的 input 和 input-group-addon。我可以将输入设置为 20 像素，但不幸的是，当我这样做时，我发现输入组插件最终总是比输入本身大一两个像素。

这是一个 jsfiddle...

http://jsfiddle.net/stazna01/U6MJe/1/

<div 
    class="input-group input-group-sm input" 
    style="width: 200px; height: 20px; margin: 100px auto;">
    <input type="text" 
        class="form-control" 
        placeholder="Search" 
        style="height: 20px; padding: 0; margin: 0;" />
    <span 
        class="input-group-addon" 
        style="height: 20px; padding: 0 4px; margin: 0;">

        <span class="glyphicon glyphicon-search"></span>
    </span>
</div>

Answer 1

尝试使 box-sizing 属性协调:

input, span {
    box-sizing: content-box;
    -moz-box-sizing: content-box;
}

http://jsfiddle.net/isherwood/U6MJe/6