bootstrap 4 Popper内容不能添加Button？

Question

想在项目中的bootstrap的Popover内容中添加一个按钮，但是不知道为什么页面中没有按钮元素。
版本为v4.3.1 ，但在v3.3.7中可以省略。 我怎么解决这个问题？ v4.3.1升级结果如何？

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script> <script> $('[data-toggle="popover-click"]').popover({ html: true, trigger: 'click', placement: 'bottom', content: function () { return $('#popover_content_wrapper').html(); } }); </script> <a class="btn btn-primary mt-5" data-toggle="popover-click" data-img="">Click me</a> <div id="popover_content_wrapper" style="display: none"> <p class="title"> Do you want to close this message? </p> <div class="row"> <div class="col-md-2" id="confirm"> <i class="far fa-check-circle fa-2x green-text"></i> <button class="btn-primary btn-sm btn"></button> </div> <div class="col-md-2" id="deny"> <i class="far fa-times-circle fa-2x red-text"></i> </div> </div> </div>

Answer 1

我编辑了您的问题以改进格式。 并包括外部库以运行代码段并查看您得到的结果。

好吧，在我下面的实现中，我已经将你的图标包装到按钮中。 然后，我添加了特殊的 btn 类： btn-success或btn-danger ，它们与您的green-text或red-text相当，但应用于按钮。

我建议您在页面中构建弹出窗口组件（始终可见） ，然后在格式符合预期时，在单击时编写其行为脚本。

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script> <script> $('[data-toggle="popover-click"]').popover({ html: true, trigger: 'click', placement: 'bottom', content: function () { return $('#popover_content_wrapper').html(); } }); </script> <a class="btn btn-primary mt-5" data-toggle="popover-click" data-img="">Click me</a> <div id="popover_content_wrapper" style="display: block"> <p class="title"> Do you want to close this message? </p> <div class="row"> <div class="col-md-2" id="confirm"> <button class="btn btn-success btn-sm"> <i class="far fa-check-circle fa-2x"></i> </button> </div> <div class="col-md-2" id="deny"> <button class="btn btn-danger btn-sm"> <i class="far fa-times-circle fa-2x"></i> </button> </div> </div> </div>

您可以将 display: id #popover_content_wrapper的display: block替换为您的初始display: none以按预期测试您的组件。