如何在bootstrap中为不同大小定义“affix”显示？

Question

我附加了一些侧边栏，看起来像这样：

<div class="col-xs-6 col-sm-3  sidebar-offcanvas" id="sidebar" data-spy="affix">

我想告诉他：

当您按照规定的尺寸到达时：

col-xs-6 col-sm-3

我需要你禁用“data-spy”元素。当你到达正确的尺寸时，把它带回来。

Answer 1

Bootstrap col-sm和col-xs效果为768px或更低..您可以使用jQuery动态应用它。

这是代码。

function setDataSpy() {
  var windowWidth = $(window).width();
  var sidebar = $('#sidebar');
  var dataSpy = sidebar.attr('data-spy');

  if (windowWidth <= 768 && dataSpy != undefined) {
    sidebar.attr('data-spy', 'affix');
  } else {
    sidebar.attr('data-spy', '');
  }
}
setDataSpy();
$(window).resize(function() {
  setDataSpy();
});

当屏幕尺寸低于768px时，会添加

data-spy="affix" ..根据需要更改数字。