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

Question

我有一个问题，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>

我只是使用默认的接线方式:

$('[rel="tooltip"]').tooltip();

我在这里创建了一个 jsFiddle 来显示问题:http://jsfiddle.net/bAaQP/2/

请注意，当输入获得焦点时，它会折叠控件右侧的空白。

我只是使用 Bootstrap 2.2.2 中的示例网格形式。表单元素具有相对跨度大小设置，并包含在用 controls-row 类装饰的 div 中。

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

Answer 1

编辑:自version 2.3.0 以来，Bootstrap 已向工具提示和弹出框添加了一个容器 选项。它解决了这个问题。

用法:

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

---

这似乎是 Bootstrap 中一个不太明显的错误。

当工具提示出现在两个 span 之间时，它会取消此 CSS 样式(bootstrap.css 的第 1319 行):

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

留下 margin-left: 0，导致空格跳转。这是一个 jsFiddle使用工具提示“点击”触发器，以便您可以使用您选择的检查器观察此行为。

您可以添加以下 CSS 作为您的目的的 hack 修复:

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

更好的解决方案:open an issue报告错误。