使用input-append（Twitter Bootstrap）中断布局表单控件输入

Question

我目前正在使用Twitter Bootstrap创建表单。

为了设置文件输入，我正在使用input-append：

<div class="input-append">
    <input type="text" name="product[picture]-input" id="picture" readonly="readonly" placeholder="Produktbild (optional)">
    <button class="btn" id="picture-reset" type="button"><i class="icon-remove"></i></button>
    <button class="btn" id="picture-select" type="button">...</button>
</div>

但是我没有将样式与其他输入相匹配。我正在使用响应式设计，我尝试使用

进行相对大小调整

class="input-medium"

或使用

进行网格大小调整

class="span4"

但似乎输入附加未优化。您可以在此处看到完整的代码：

http://jsfiddle.net/6cvYr/

这里有一些屏幕尺寸不同的屏幕，每种尺寸都不适合：

https://drive.google.com/folderview?id=0ByywF8ZXCU9kbTdUZ1N6bkxodGs&usp=sharing

有什么想法吗？