Twitter 引导弹出框已损坏答案

【问题标题】：Twitter bootstrap popover is brokenTwitter 引导弹出框已损坏
【发布时间】：2013-03-28 11:10:48
【问题描述】：

注意：

jQuery 1.9.1
引导程序 2.3.1
WordPress 3.6 Beta 1 - 此问题仅发生在 WordPress 3.6 Beta 中

似乎弹出框在最新版本的 wordpress 中被破坏了，我有带有弹出框的元素的 html，以及使弹出框工作的 jquery。

图片

如果你看不到它，弹出的箭头会向左移动并且几乎是不透明的

该特定元素的 HTML：

<div class="control-group">
    <label class="radio">
        <input type="radio" class="regular" name="aisis_options[posts_display]" value="regular_posts" checked=""> Display normal index of posts. 
        <a href="#" id="regularPosts" rel="popover" data-content="This is a regular list of posts, it comes with a sidebar and pagination." data-trigger="hover" data-original-title="Display as Regular Listing">
            <i class="icon-info-sign"></i>
       </a>
    </label>
</div>

jQuery:

$("#regularPosts").popover({ html : true });

我不知道还能向您展示什么，因为我无法授予您对我的 WordPress“实时”开发环境的管理员访问权限。

谁能告诉我发生了什么事？

【问题讨论】：

标签： jquery html css wordpress twitter-bootstrap

【解决方案1】：

Bootstrap 也会要求您下载 popover 插件，因此请确保您已实现该插件。或者甚至转到自定义引导页面，并确保您的选项被选中。

【讨论】：

【解决方案2】：

实际上它们在你的代码中没有问题，你已经正确地实现了它，问题是 twitter bootstrap css 和 wordpress css 崩溃了，你必须通过制作 bootstrap css 来自定义它，尝试删除 wordpress css 或将 bootstrap css 设为 !important... 希望这个技巧对您有用...

【讨论】：

【解决方案3】：

我确认 WordPress 3.6 Beta 1 上出现了两个样式表（Bootstrap 和 Wordpress load-styles.php）之间的冲突。

在这个 beta 版本中，他们显然添加了 .arrow 类，Twitter Bootstrap Popover 也使用了该类。

我是如何解决的？

bootstrap.min.js：将<div class="arrow"> 替换为<div class="popover-arrow">
bootstrap.min.css：将.arrow 替换为.popover-arrow

希望有帮助！

【讨论】：