Bootstrap：为什么我的输入框和按钮有间隙？

Question

请在http://jsfiddle.net/TccN5/检查我的代码。

输入文本框与右侧按钮之间有间隙。对于Bootstrap site上的相同标记，输入框和按钮具有良好的紧密配合，没有间隙。

为什么我有差距？

Answer 1

whitespace character和button元素之间有额外input个。在button元素后立即放置input标记：

<input type="text" /><button class="btn" type="button">Any</button>

DEMO1

或者，应用此css样式：

​.input-append{
    font-size:0;
}​

DEMO2

Answer 2

我不知道为什么会这样，但这是我修复它的方式。也许你有一些自己的CSS与文本字段冲突。

这里是修复http://jsfiddle.net/TccN5/2/

的jsfiddle

我刚刚添加了

     style="margin-right:-4px"

到你的

     <input type="text">

Answer 3

使用input-prepend和input-append

<div class="btn-group input-prepend input-append">
    <input type="button" class="btn" value="Prev">
    <input type="text" value="">
    <input type="button" class="btn" value="Next">
<div>