Question

有什么办法可以在小型设备上自动折叠bootstrap 3.0中的面板？我希望获得与顶部导航相同的效果 - 因此当屏幕很小时，屏幕上只会显示一个切换按钮。

Answer 1

这就是我的工作。

$(document).ready(function(){
  if ($(window).width() <= 480){  
    $('.panel-collapse').removeClass('in');
  }
});

$(window).resize(function(){
  if ($(window).width() >= 480){  
    $('.panel-collapse').addClass('in');
  }
  if ($(window).width() <= 480){  
    $('.panel-collapse').removeClass('in');
  }
});

Answer 2

当前接受的答案假设断点大小为480.由于断点可以通过Less或Sass更改，因此更好的解决方案是在JavaScript中找出断点。

Bootstrap（令人惊讶的是）没有内置的实用工具，但你可以通过添加一些测试div并检查它们的可见性来轻松地制作一个。示例如下：

var isBreakpoint = function(viewport_size){
  return $('.device-' + viewport_size).is(':visible')
}

$(document).ready(function(){
  var test_divs = "<div class='device-xs visible-xs'></div>"
  test_divs = test_divs + "<div class='device-sm visible-sm'></div>"
  test_divs = test_divs + "<div class='device-md visible-md'></div>"
  test_divs = test_divs + "<div class='device-lg visible-lg'></div>"
  $("body").append(test_divs)

  if (isBreakpoint('xs'){
    $('.panel-collapse').removeClass('in');
  }
  else {
    $('.panel-collapse').addClass('in');
  }
})

改编自： How to detect responsive breakpoints of Twitter Bootstrap 3 using JavaScript?

如何在bootstrap中自动折叠小设备上的面板？

2 个答案: