Twitter bootstrap 引导工具提示导致网格布局中的表单元素折叠间距

我有一个问题，引导工具提示会导致输入字段上的间距崩溃。标记为：

<form>
  <div class="controls controls-row">
    <input class="span4" data-original-title="Default tooltip" rel="tooltip" type="text" placeholder=".span4">
    <input class="span1" data-original-title="Default tooltip" rel="tooltip" type="text" placeholder=".span1">
  </div>
</form>

我在这里创建了一个JSFIDLE来说明问题：

请注意，当输入接收焦点时，它会将空白折叠到控件右侧

我只是使用Bootstrap 2.2.2中的示例网格表单。表单元素具有相对跨度大小设置，并包含在用控件行类修饰的div中

---

我也尝试过最新版本的Bootstrap-tooltip.js，但它仍然显示相同的行为。

编辑：Bootstrap在工具提示和弹出框中添加了一个

容器

选项，从那时起解决了这个问题

用法：

$('[rel="tooltip"]').tooltip({
    container: '.controls'
});

---

这似乎是引导程序中的一个模糊错误

当工具提示出现在两个跨距之间时，将使此CSS样式无效（bootstrap.CSS的第1319行）：

将

边距留空：0

，导致空格跳转。下面是一个使用工具提示“单击”触发器的示例，以便您可以使用所选的检查器观察此行为

出于您的目的，您可以添加以下CSS作为黑客补丁：

.controls-row [class*="span"] + .tooltip + [class*="span"] {
    margin-left: 20px;
}

---

更好的解决方案：报告错误。

我今天使用Popover时遇到了类似的问题@Sara的回答非常有帮助（如果我有这个名声的话，我会对此发表评论），但我不得不将.tooltip改为.popover，将边距左值改为22px，以使它看起来正确

.controls-row [class*="span"] + .popover + [class*="span"] {
    margin-left: 22px;
}

---

这不是引导中的错误，有一个简单的解决方案。创建时只需传入容器选项：

---

我相信这不是一个bug，请看我的答案。@Sara，谢谢，我不知道容器属性。对于我的SPA，我设置了容器：“body”，因为我只在“startup”期间触发了一次工具提示类。这个选项是在2月7日（在提出这个问题之后），可能是为了解决这个问题！啊，是的，我想你是对的，注意问题是w.r.t.Bootstrap 2.2.2

.controls-row [class*="span"] + .tooltip + [class*="span"] {
    margin-left: 20px;
}

.controls-row [class*="span"] + .popover + [class*="span"] {
    margin-left: 22px;
}

$(".my-input").tooltip({
...
container: "body"
});