Bootstrap 4进度条点击显示后无法更新问题求助

问题场景 #

点击按钮时，进度条能正常显示，但进度条的宽度无法更新；移除初始的style="display: none"后，进度条又能正常更新进度。

问题原因 #

你把进度条容器.progress的display属性从Bootstrap默认的flex改成了block，破坏了它的flex布局结构。.progress-bar作为flex子元素，在非flex容器中，宽度更新无法正确渲染出来。

解决方案 #

有两种简单的修复方式：

方式1：使用Bootstrap内置的显示隐藏类 #

Bootstrap 4提供了专门的显示隐藏工具类，用它来控制进度条的显示隐藏，不会破坏原有布局：

修改HTML：把内联的style="display: none"替换为Bootstrap的d-none类

<div class="progress d-none" id="progress-top">
  <div class="progress-bar" role="progressbar" aria-valuenow="" aria-valuemin="0" aria-valuemax="100">
  </div>
</div>

修改JavaScript：点击按钮时移除d-none类即可

document.getElementById("submit-btn").addEventListener("click", function() {
  document.getElementById("progress-top").classList.remove('d-none');

  var i = 0;
  if (i == 0) {
    i = 1;
    var width = 1;
    var id = setInterval(frame, 50);

    function frame() {
      if (width >= 100) {
        clearInterval(id);
        i = 0;
      } else {
        width++;
        const progressBar = document.getElementsByClassName('progress-bar')[0];
        progressBar.setAttribute('aria-valuenow', width);
        progressBar.style.width = `${width}%`;
      }
    }
  }
})

方式2：直接设置正确的display属性 #

如果不想用Bootstrap工具类，只需要把设置display: block改成display: flex，恢复容器的flex布局：

document.getElementById("submit-btn").addEventListener("click", function() {
  // 用flex替换block，匹配Bootstrap的默认样式
  document.getElementById("progress-top").style.display = 'flex';

  var i = 0;
  if (i == 0) {
    i = 1;
    var width = 1;
    var id = setInterval(frame, 50);

    function frame() {
      if (width >= 100) {
        clearInterval(id);
        i = 0;
      } else {
        width++;
        const progressBar = document.getElementsByClassName('progress-bar')[0];
        progressBar.setAttribute('aria-valuenow', width);
        progressBar.style.width = `${width}%`;
      }
    }
  }
})

额外优化建议 #

• 不要用setAttribute('style', ...)来设置宽度，直接用element.style.width，避免覆盖掉Bootstrap给.progress-bar设置的其他样式（比如flex相关属性）。
• 可以用querySelector替代getElementsByClassName，代码更简洁：document.querySelector('.progress-bar')

内容的提问来源于stack exchange，提问作者user1753640