如何在较小的屏幕上禁用Bootstrap的"词缀"？

Question

我在一个站点中使用了一个导航栏的词缀组件,并希望在较小的屏幕上禁用它.我正在使用jquery方法与数据相比,当我的屏幕分辨率小于767px时,无法弄清楚如何关闭它.我已经尝试在调整大小和滚动时捕获窗口宽度,并返回false或删除词缀类但它确实不能正常工作.

if($('#subnav').length){

    $(window).resize(function() {
        var wWidth = $(window).width();
        getSize(wWidth);
    });

    $(window).scroll(function () {
        var wWidth = $(window).width();
        getSize(wWidth);
    });

    function getSize(z){
        if(z <= 767) {
                    // I tried doing return false here, no good.
            $('#subnav').removeClass('affix').removeClass('affix-top');
            $('.nav > li').removeClass('active');
        } else {
            setNav();
        }
    }

    var wWidth = $(window).width();
    getSize(wWidth);

    function setNav (){
        $('#subnav').affix({
            offset: {
            top: 420,
            bottom: 270
            }
        });
        $('#subnav').scrollspy();
    }

}

Answer 1

您可以像在Bootstrap页面上一样使用CSS来完成它.使用@media查询检测屏幕大小,fixed如果屏幕低于特定大小,则不要将位置设置为.例如:

@media (min-width: 768px) {
    .affix {
        position: fixed;
    }
}

仅当屏幕宽度超过768px时,此规则才会生效.

您也可以这样做,static如果屏幕小于特定大小,则明确设置元素的位置:

@media (max-width: 767px) {
    .affix {
        position: static;
    }
}