弹出框内的进度条
Progress bar within popover
使用 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>
我可以做些什么来让进度条保持在弹出窗口的边框内,同时仍然响应。
你需要创建剑元素然后设置ppf样式="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>
使用 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>
我可以做些什么来让进度条保持在弹出窗口的边框内,同时仍然响应。
你需要创建剑元素然后设置ppf样式="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>