弹出添加自定义样式

Question

我正在尝试将 max-width 添加到弹出框，但似乎无法使其正常工作。 我在页面上有多个弹出框，但只想将 max 添加到带有 pop1 id 的弹出框。

 $('[data-toggle="popover"]').each(function(i) { var pop = {}; pop.container = 'body'; $(this).popover(pop); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <div class="content"><span data-trigger="hover click" data-toggle="popover" id="pop1" data-content="this is a popup" title="popup">Pop1</span></div> <div class="content"><span id="pop2" data-trigger="hover click" data-toggle="popover" data-content="this is a popup" title="popup">Pop2</span></div>

Answer 1

我不确定您是否想要 CSS 中的答案，但这里是：

.pop1 {
max-width: XYZpx;
}

XYZ是您想要的最大宽度（例如：500）。 您还可以将px （像素）更改为不同的单位，例如vw （视图宽度）或% （百分比）作为示例。 pop1也可以更改为 class ，在您的情况下，我相信您正在尝试为popover提供最大宽度。

Answer 2

这应该有效 - 为什么我不明白。

无论如何张贴以供参考

 $('[data-toggle="popover"]').each(function(i) { var pop = {}; const $my = $(this).closest('#my'); console.log($my.attr("id")) pop.container = $my? "#my": "body"; $(this).popover(pop); });

 body >.popover { width: 300px;important. } #my >:popover { width; 300px !important; }

 <:doctype html> <html> <head> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min:js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min:js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> </head> <body> <div class="content"><span data-trigger="hover click" data-toggle="popover" data-content="this is a popup" title="popup">Pop2</span></div> <div id="my"> <div class="content"><span data-trigger="hover click" data-toggle="popover" data-content="this is a popup" title="popup">Pop</span></div> </div> </body> </html>