3

我有一个问题，引导工具提示导致我的输入字段上的间距折叠。标记是：

<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 中的示例网格表单。表单元素具有相对跨度大小设置，并包含在用控件行类装饰的 div 中。

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

4

3 回答 3

5

编辑：自2.3.0 版以来， Bootstrap 已container为工具提示和弹出框添加了一个选项，可解决此问题。

用法：

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

这似乎是 Bootstrap 中一个有点模糊的错误。

当工具提示出现在两个跨度之间时，它会取消此 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;
}

更好的解决方案：打开一个问题来报告错误。

于 2013-01-25T04:56:25.010 回答
1

这不是 Bootstrap 中的错误，有一个简单的解决方案。只需在创建工具提示时传入容器选项：

$(".my-input").tooltip({
...
container: "body"
});
于 2013-04-18T13:23:20.183 回答
0

今天使用弹出框时我遇到了类似的问题。@Sara 的回答非常有帮助（如果我有声誉，我会对此发表评论）但我必须将 .tooltip 更改为 .popover 并将 margin-left 值更改为 22px 以使其看起来正确。

.controls-row [class*="span"] + .popover + [class*="span"] {
    margin-left: 22px;
}
于 2013-04-07T17:03:34.073 回答