弹出窗口CSS问题中的Bootstrap星级评分

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>

编辑：我刚试过，但也没有用：/

有没有办法让 CSS 工作？

提前致谢。

这是一个小提琴样本，看看我在说什么：

https://jsfiddle.net/66xL9sLr/

Answer 1

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

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

样式表 https://raw.githubusercontent.com/kartik-v/bootstrap-star-rating/master/css/star-rating.min.css 未加载，因为它的 MIME 类型“text/plain”不是“text/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');
  });
});

更新的小提琴可用here。

Answer 2

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