javascript - Bootstrap 弹出框不显示内容

我正在尝试让网站上的 Bootstrap 弹出框（popover）工作，并且我已经取得了一些成功。我可以在点击链接时显示弹出框，但我看不到除了标题之外的任何内容。我尝试了两种方法：

<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 来看到我的意思。

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

答案＃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;
}

显而易见，通过改变字体大小：0；内容将可见（已在 Chrome 检查器中测试）将其添加到你的 CSS

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

答案＃2

当我检查当前版本（v2.2.2）时，这个漏洞已经被修复。请下载最新版本。