弹出框内的进度条

Question

使用Bootstrap我在进度条中插入了进度条（我用它来显示一些统计信息），但是问题是进度条超出了进度条的边界，这是我的代码：

 $("#sword").popover({ trigger: "hover" , placement: 'top', html:true, content: function() {return $("#ppf").html();} }); 

  <div class="hide" id="ppf"> <div class="container"> <h5 class="progress-label"> Others: </h5> <div class="progress" style=""> <div class="progress-bar" role="progressbar" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100" style="width:66%">66%</div> </div> <br/><br/> </div></div> 

我可以做的是，使进度条除了保持响应性之外，还应位于弹出框的边界内。

Answer 1

您需要创建剑元素，然后设置ppf style =“ display：none;”。

多数民众赞成在这里是您的相同代码的示例

<div id="info" style="display:none;">
  <div class="container">
    <h5 class="progress-label"> Others: </h5>
    <div class="progress" style="">
      <div class="progress-bar" role="progressbar" aria-valuenow="66"
      aria-valuemin="0" aria-valuemax="100" style="width:66%">66%
      </div>
    </div><br/><br/>
  </div>
</div>

<button type="button" class="btn">
  Popover on right
</button>

在JsFiddle上工作的示例