Bootstrap 4 - <progress>元素上的文本/图标

Question

我正在尝试在Bootstrap 4 alpha中的进度条上叠加一个图标。

<progress class="progress progress-primary" value="100" max="100">
  <i class="fa fa-check-circle-o"></i>
</progress>

它应该如下（粗略地）：

相反，我最终得到以下内容：

不幸的是，appearance:initial;和!important标签的组合并没有这样做。

我错过了什么导致<progress>元素中的文字无法显示？

Answer 1

将图标移到progress元素之外，然后使用def sale_params modified_params = params.require(:sale).permit(:store_id, :item_id, :quantity, :sale_price) def sale_params modified_params = params.require(:sale).permit(:store_id, :item_id, :quantity, :sale_price) modified_params[:sale_price] = modified_params[:quantity].to_i * 3.to_i modified_params end ..

position:relative

http://www.codeply.com/go/gl3DnWcPKu

Answer 2

在最新版本的Bootstrap 4 alpha-6中，此问题不再是问题：

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

＆＃13;

＆＃13;

＆＃13;