为什么在Twitter Bootstrap的前置图标和输入字段之间有空格？

Question

使用Twitter的Bootstrap,我有一个带有输入字段和前置图标的表单:

<div class="input-prepend">
  <label for="some_name">What's your ...</label>
  <span class="add-on"><i class="icon-road"></i></span>
  <input type="text" class="span2" name="some[name]" id="some_name"/>
</div>

这就是结果:

我还没有改变Bootstrap的CSS.示例显示图标和输入字段之间没有这样的空格.我怎么摆脱它？

Answer 1

自己发现:不要在图标标记和input:

<div class="input-prepend">
  <label for="some_name">What's your ...</label>
  <span class="add-on"><i class="icon-road"></i></span><input type="text" class="span2" name="some[name]" id="some_name"/>
</div>

正如Twitter自己在图标文档中解释它:

当在文本字符串旁边使用时,如在按钮或导航链接中,请务必在标记后留一个空格以获得适当的间距.

那是我的线索.