为什么在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自己解释in the icons documentation：

  

在按钮或导航链接旁边使用文本字符串时，请务必在标记后面留一个空格以保持适当的间距。

这是我的线索。