Bootstrap 4-进度条在浏览器上不起作用

我正在使用Bootstrap v4.0.0-alpha.6。我想运行的代码在js小提琴上工作得非常好，但是一旦我通过服务器运行它，它不会显示进度条。任何想法，我要去哪里错了？Bootstrap 4-进度条在浏览器上不起作用

这里是我的JS Fiddle

的代码的链接下面是具有自举一个PHP网页页面。

<!DOCTYPE HTML> 

<html> 

<head> 


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
<script src="https://npmcdn.com/[email protected]/dist/js/tether.min.js"></script> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 

<script> 


var progressBar = $('.progress-bar'); 
var percentVal = 0; 


window.setInterval(function(){ 
    percentVal += 20; 
    progressBar.css("width", percentVal+ '%').attr("aria-valuenow", percentVal+ '%').text(percentVal+ '%'); 

    if (percentVal == 100) 
    { 
     var link = document.getElementById('nav-ask'); 
link.style.display = 'none' 
    } 

}, 500); 
</script> 

</head> 

<body> 



    <div class="row"> 
     <div class="col-xs-8"> 
      <div class="progress"id="nav-ask"> 
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"> 
         0% 
        </div> 
       </div> 
       </div> 
       </div>

来源

2017-08-28 user3402248

检查控制台并告诉我们显示的内容 – coderredoc

页面加载后控制台为空白。显示没有错误。 – user3402248

检查答案..现在可以运作 – coderredoc

当你的脚本运行时，页面还没有准备好。因此，只需在html加载后将下面的脚本。然后它工作。

... 
<div class="row"> 
     <div class="col-md-12"> 
      <div class="progress"id="nav-ask"> 
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"> 
         0% 
        </div> 
       </div> 
       </div> 
       </div> 

<script> 
Your script here. 
</script> 
</body>

我已将尺寸设置为col-md-12，以便我可以正确地看到它。

替代解决方案： -

因为你是使用jQuery使用

$(document).ready(function(){ 
    your script 
})

这样可以节省你把你的代码在页面的底部，使其工作。

来源

2017-08-28 20:29:10 coderredoc

Bootstrap 4-进度条在浏览器上不起作用

回答

相关问题