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

Question

我已经看到了以下答案：

1) Twitter's Bootstrap popover not working

2)Twitter bootstrap .popover not working

3)Bootstrap Popover not working

没有人能帮我解决问题。

我正在尝试在 Bootstrap 中使用弹出框，我单击按钮但弹出框没有出现。

我找不到问题。这是弹出框的 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

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

已弃用作为包管理器的 Bower 支持 替代品（例如，Yarn 或 npm）。有关详细信息，请参阅 bower/bower#2298。

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

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

Answer 2

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

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

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

Answer 3

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

在 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