弹出框内的进度条答案

【问题标题】：Progress bar within popover弹出框内的进度条
【发布时间】：2016-08-16 20:08:10
【问题描述】：

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

除了仍然响应之外，我可以做什么使进度条保持在弹出框的边框内。

【问题讨论】：

尝试将container 更改为container-fluid。前者是固定宽度，可能会迫使您的进度条看起来比弹出框更宽。或者，您可以将其完全删除；如果您所做的只是将其插入弹出框，则没有真正的理由使用 .container。
@RobertC 实际上，我添加了容器类，因为我想将标签和进度条对齐在同一行。无论如何，您的两个解决方案都可以正常工作。谢谢你:)

标签： javascript css twitter-bootstrap progress-bar popover

【解决方案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>

Example working on JsFiddle

【讨论】：