Bootstrap 4进度条在popover中无法使用（看起来像popover限制了CSS属性）。

这段代码在body area上可以正常工作。

<div class="progress" style="height: 25px;">
  <div class="progress-bar" style="width: 30%;" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
  </div>
</div>

但是，当把它放在弹出式按钮里面的时候，它就不工作了。

下面是弹出式按钮的代码。

  <button type="button" class="btn btn-link text-white" style="margin-top:-5px;margin-bottom:-7px;" data-container="body" data-toggle="popover" data-placement="left" data-original-title="Average reviews">97.5% approval</button>

JS代码：

$('[data-toggle="popover"]').popover({
 placement : 'top',
 trigger : 'hover',
 html : true,
 content: function() {
 return $('#popover_content_wrapper').html();
 }
});

和弹出式内容。

  <div id="popover_content_wrapper" style="display: none">
    <div class="progress" style="height: 25px;">
      <div class="progress-bar" style="width: 30%;" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="progress" style="height: 15px;">
      <div class="progress-bar" style="width: 30%;" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="progress" style="height: 15px;">
      <div class="progress-bar" style="width: 30%;" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
  </div>

另外，我必须说，在渲染图片或文字时，popover似乎可以正常工作（例如，强标签可以正常工作），但里面的fa-fa-icons即使指定了颜色也会被渲染成黑色，这让我觉得在popover元素中的CSS属性受到了限制。有谁知道为什么会发生这种情况，以及是否可以以某种方式修复？这种方法是否就是错误的？

先谢谢你了

解决方案：

好吧，看来可以通过在JS代码中的 “sanitize “属性上应用一个假值来解决。

        $('[data-toggle="popover"]').popover({
            placement : 'top',
            trigger : 'hover',
            html : true,
            sanitize: false,
            content: function() {
              return $('#popover_content_wrapper').html();
            }
        });

本文来自投稿，不代表实战宝典立场，如若转载，请注明出处：https://www.shizhanbaodian.com/40675.html