twitter-bootstrap - 如何在引导程序中自动折叠小型设备上的面板？

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');
  }
})

改编自： 如何使用 JavaScript 检测 Twitter Bootstrap 3 的响应断点？