jquery - 进度条 Bootstrap - 移动和桌面

Question

我使用的是垂直进度条，它在桌面上运行良好，但我想在移动设备上改回水平状态，这也可以通过仅在移动设备上从 div 下方删除“progress-bar-vertical”类来正常工作。

<div class="progress progress-bar-vertical">
   <div class="progress-bar progress-bar-striped active" role="progressbar"
            aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="height:90%" data-toggle="tooltip" title="Center">
    </div>
</div>

但我需要将桌面上的内联 css“width:90%”更改为移动设备上的“height:90%”。我该怎么做。

Answer 1

您可以将数据属性添加到您的 HTML 并使用以下代码通过 jQuery 进行处理:

var resizeTimeout = false;
$(window).resize(function() {
  if (resizeTimeout) clearTimeout(this.resizeTO);
  resizeTimeout = setTimeout(function() {
    //do something, window hasn't changed size in 500ms
    // Get window size and process your html
    if ($(window).width() < 480)
      $('.screen').text('Mobile');
    else
      $('.screen').text('Desktop');
  }, 200);
});
$(window).resize();

和 JSFiddle:https://jsfiddle.net/r3nkkjto/1/