css - 为什么 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 自己在图标文档中解释的那样：

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

那是我的线索。