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

(0)
上一篇 14小时前
下一篇 14小时前

相关推荐

发表评论

登录后才能评论