Bootstrap 弹出框内的星级评分 CSS 问题

Question

我有一个 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>

不过，我认为如果我将代码直接放在 data-content 属性中，它可能会起作用:

<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>

edit : I just tried that, and it didn't work either :/

有什么方法可以让 CSS 工作吗？

提前致谢。

这里有一个 fiddle 示例来了解我在说什么：

https://jsfiddle.net/66xL9sLr/

Answer 1

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

Answer 2

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

在控制台中，您应该会看到类似这样的错误：

The stylesheet https://raw.githubusercontent.com/kartik-v/bootstrap-star-rating/master/css/star-rating.min.css was not loaded because its MIME type, "text/plain", is not "text/css".

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

也就是说，插件的 javascript 和为弹出窗口创建的布局 bootstrap 似乎仍然存在问题。

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

为了解决这个问题，我做了以下事情：

从输入中删除 .rating class。这可以防止插件在将其添加到弹出窗口之前对其进行初始化。
绑定到弹出窗口的 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');
  });
});

已更新 fiddle 可用 here。

Bootstrap 弹出框内的星级评分 CSS 问题

Bootstrap star-rating inside popover CSS issue

javascript

jquery

css

rating-system

bootstrap-popover