twitter-bootstrap Bootstrap 弹出框不显示内容

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/13285663/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 15:40:29  来源:igfitidea点击:

Bootstrap popover not showing content

javascriptjqueryhtmltwitter-bootstrappopover

提问by Meisam Mulla

I am trying to get the bootstrap popover to work on a website and I have been somewhat successful. I can get the popover to show up when the link is clicked however I don't see any content in the box except for the title. I have tried it 2 ways:

我正在尝试让 bootstrap popover 在网站上工作,而且我取得了一些成功。我可以在单击链接时显示弹出窗口,但是除了标题之外,我在框中看不到任何内容。我已经尝试了 2 种方式:

<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>

and

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

However neither one actually shows the content in the box. You can see what I mean by going to http://www.onemobi.net/newand clicking Sign inat the top.

然而,没有一个实际显示框中的内容。您可以通过访问http://www.onemobi.net/new并单击Sign in顶部来了解我的意思。

Edit:I'm not doing both of these at the same time. I tried one and then the other.

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

回答by davidkonrad

You must place the code in a function

您必须将代码放在函数中

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

or

或者

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

then it works. But why are you defining the popover settings twice (both in script and as data attributes)?

那么它的工作原理。但是为什么要两次定义 popover 设置(在脚本和数据属性中)?

Eureka!

尤里卡!

It seems that you have changed the default styling in bootstrap.css. The content of the popover IS actually shown, in a <p>, but you have

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

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

obvious, by changing font-size: 0; the content will be visible (tested in chrome inspector) Add to your CSS

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

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

回答by Wonil

As I checked the current version (v2.2.2) this bug had been resolved. Please download the latest one.

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