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

时间:2016-12-06 21:49:45

标签: css twitter-bootstrap twitter-bootstrap-4

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

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

它应该如下(粗略地):

Desired Result

相反,我最终得到以下内容:

Actual Result

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

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

2 个答案:

答案 0 :(得分: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

答案 1 :(得分:1)

在最新版本的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;