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/

Answer 2

您可以看到桌面上的垂直条/隐藏在其他设备上的垂直条和移动/隐藏在其他设备上的水平条。

对于桌面：

class = ".visible-md-* .visible-lg-*"

移动设备：

.visible-xs-*

对于平板电脑：

.visible-sm-*

您将使用首选课程设置整个div或导航栏或桌面的任何内容，然后使用相应的类设置您希望在移动设备上显示的div或导航栏。

Progress Bar Bootstrap - Mobile＆amp;桌面

2 个答案: