引导弹出窗口不显示内容答案

【问题标题】：Bootstrap popover not showing content引导弹出窗口不显示内容
【发布时间】：2012-10-28 10:48:09
【问题描述】：

我正在尝试让引导弹出窗口在网站上运行，并且我已经取得了一定的成功。单击链接时，我可以显示弹出框，但是除了标题之外，我在框中看不到任何内容。我已经尝试了两种方法：

<a class="btn btn-link login-popover" rel="popover" data-placement="bottom" data-title="Sign in to the website builder" data-html="true" data-content="Lo4545445"> Sign in  <span class="caret"></span></a>

和

$('.login-popover').popover({
    placement: 'bottom',
    title: 'Sign in to the website builder',
    content: 'testing 123',
    trigger: 'click'
});

但是，没有人真正显示框中的内容。您可以转到http://www.onemobi.net/new 并单击顶部的Sign in 来了解我的意思。

编辑：我不会同时做这两件事。我试了一个，然后另一个。

【问题讨论】：

标签： javascript jquery html twitter-bootstrap popover

【解决方案1】：

您必须将代码放在函数中

$(document).ready(function() {
  $('.login-popover').popover({
    placement: 'bottom',
    title: 'Sign in to the website builder',
    content: 'testing 123',
    trigger: 'click'
  });
});

或

$(function () { 
   $(".login-popover").popover();    
});

然后就可以了。但是为什么要定义两次弹出框设置（在脚本和数据属性中）？

尤里卡！

您似乎更改了 bootstrap.css 中的默认样式。弹出框的内容实际上是在<p> 中显示的，但是您有

.btn-group {
  font-size: 0;
  white-space: nowrap;
}

很明显，通过改变 font-size: 0;内容将可见（在 chrome 检查器中测试）添加到您的 CSS

.btn-group {
  font-size: 12px; /*or whatever size */
}

【讨论】：

我尝试了一个，然后另一个不是同时尝试。将代码包装在 $(document).ready() 中只会让它根本不起作用。
其实它还在做同样的事情。
已更新答案，以某种方式误导。好吧，您的代码中的其他地方一定有错误 - 您在控制台中收到任何错误吗？我拿了你的代码，粘贴它，把脚本包装在一个函数中，它就可以工作了。
.btn-group 负责内容不可见
我有告诉过你你有多厉害吗？嗯，你太棒了！

【解决方案2】：

当我检查当前版本 (v2.2.2) 时，此错误已得到解决。请下载最新的。

【讨论】：

你能扩展你的答案吗？你是说 Bootstrap 版本吗？