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以按預期測試您的組件。