我的 Bootstrap 弹出窗口不工作，我该如何调试它？

Question

我已经看到以下答案：

1) Twitter's Bootstrap popover not working

2) Twitter bootstrap .popover not working

3) Bootstrap Popover not working

None帮我解决问题

我正在尝试在 Bootstrap 中使用 Popover，我点击了按钮，但没有出现 Popover。

我找不到问题。这是弹出窗口的 HTML 代码，我从文档中得到它。

        <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
            Popover on top
        </button>

这是与进口相关的代码。

<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="/style/global.css">
<link rel="stylesheet" href="/bower_components/lightslider/dist/css/lightslider.css">
<link rel="stylesheet" type="text/css" href="/style/flags/flags.css"/>
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/script/index.js"></script>
<script src="/bower_components/popper.js/dist/popper.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="/bower_components/lightslider/dist/js/lightslider.js"></script>

Answer 1

您可能缺少 popover 实例...尝试添加

$(function () {
  $('[data-toggle="popover"]').popover()
});

并验证您的链接是否正确。同时验证其要求 here

Answer 2

请进行以下更改，然后重试。

在 head 部分包含 css 个文件，在 '' 之前包含 JS 文件。

同时添加以下js代码：

$(document).ready(function () {$(function () {
  $('[data-toggle="popover"]').popover()
});

主要问题在css冲突：

用这个替换你的按钮

<button type="button" class="btn btn-default povr" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

并添加此 css

.povr{ margin-top:50px;}

这将解决问题。根据需要更改 CSS。

Fiddle

Answer 3

根据我们在评论中的讨论 - 这里可能的罪魁祸首是 Bower。 Bootstrap 在 V4 中放弃 Bower，转而使用 Yarn 或 npm：

Dropped Bower support as the package manager has been deprecated for alternatives (e.g., Yarn or npm). See bower/bower#2298 for details.

https://getbootstrap.com/docs/4.0/migration/#breaking

依靠不同的包管理器或手动包含 Bootstrap 是确保所有 CSS 和 JavaScript（因为它与 Bootstrap) 符合 V4 要求。

我的 Bootstrap 弹出窗口不工作，我该如何调试它？

My Bootstrap popover is not working, how can I debug it?

html

import

popover

twitter-bootstrap