javascript 确定网格de bootstrap 4：xs，sm，md，lg o xl

Posted 2021-05-03

// Tested on bootstrap 4 - 4.1
function bs4Env() {
    var envs = ['xs', 'sm', 'md', 'lg', 'xl'],
        classToAdd = '',
        $el = $('<div>'),
        i = 0,
        env;

    $el.appendTo($('body'));

    for (i = envs.length - 1; i >= 0; i--) {
        env = envs[i];

        switch (env) {
            case 'xs':
                classToAdd = 'd-none .d-sm-block';
                break;
            case 'sm':
                classToAdd = 'd-sm-none .d-md-block';
                break;
            case 'md':
                classToAdd = 'd-md-none .d-lg-block';
                break;
            case 'lg':
                classToAdd = 'd-lg-none .d-xl-block';
                break;
            case 'xl':
                classToAdd = 'd-xl-none';
                break;
        }

        $el.addClass(classToAdd);

        if ($el.is(':hidden')) {
            $el.remove();
            return env;
        } else {
            $el.removeClass(classToAdd)
        }
    }
}

console.log(bs4Env());