在弹出框 CSS 问题中引导星级

Bootstrap star-rating inside popover CSS issue

本文关键字：问题 CSS      更新时间：2023-09-26

我在弹出窗口中的星级评级中遇到了 css 问题，css 似乎被忽略了。我正在用这样的js启动我的弹出窗口：

$(function () {
$('[data-toggle="popover"]').popover({
    html: true,
    content: $('#popoverContent').html()
});
});

弹出内容 ：

<div id="popoverContent" class="hide">
  <h4><span class="label label-default">Screen</span><input type="number" class="rating" min=0 max=5 step=0.5 data-show-caption="false" data-size="xs"></h4>
</div>

但是，我认为如果我将代码直接放在数据内容属性中，它可能会起作用：

<button id="popoverButton" type="button" class="btn btn-success btn-sm" data-container="body" data-toggle="popover" data-placement="bottom" data-content="<h4><span class="label label-default">Screen</span><input type="number" class="rating" min=0 max=5 step=0.5 data-show-caption="false" data-size="xs"></h4>">
  Rate <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
</button>

编辑：我刚刚尝试过，它也不起作用：/

有没有办法让CSS工作？

提前

谢谢。

这是一个小提琴示例，看看我在说什么：

https://jsfiddle.net/66xL9sLr/

这是因为您直接链接到 github 上的 css 资源。这不适用于像 fiddle 这样的服务（当您添加它时会特别警告您这一点）。

在控制台中，您应该看到类似于以下内容的错误：

样式表 https://raw.githubusercontent.com/kartik-v/bootstrap-star-rating/master/css/star-rating.min.css 未加载，因为它的 MIME 类型"文本/纯文本"不是"文本/CSS"。

如果您手动将 CSS 添加到小提琴的 CSS 字段中或将文件托管在其他地方，它可以正常工作。

话虽如此，似乎插件的 javascript 仍然存在问题，布局引导程序为弹出框创建。

第二个问题是由于使用隐藏#popoverContent元素的布局初始化星级。插件使用该元素的尺寸等，而不是弹出框中的新尺寸。

为了解决这个问题，我做了以下工作：

  1. 从输入中删除.rating类。这会阻止插件从在将其添加到弹出框之前对其进行初始化。
  2. 绑定到弹出框的inserted.bs.popover并在那里初始化评级。现在，评级插件将使用刚刚插入到弹出窗口中的元素的布局运行其代码。

相关代码可以在这里看到： 

...
<div id="popoverContent" class="hide">
  <h4><span class="label label-default">Screen (Quality)</span><input class="ratingInput" type="number" min=0 max=5 step=0.5 data-show-caption="false" data-size="xs"></h4>
</div>
...
$(function () {
    $('[data-toggle="popover"]').popover({
        html: true,
        content: function() {
          return $('#popoverContent').html();
        }
    });
  $('[data-toggle="popover"]').on('inserted.bs.popover', function () {
    $( 'body .popover .ratingInput' ).rating('create');
  });
});

此处提供更新的小提琴。

奇怪，你试过内联样式吗？

相关文章：