Question

我在所有输入上都使用了twitter bootstrap的input-lg类。是否有一种（可能是javascript）方法用较小的屏幕上的twitter bootstrap的input-sm替换它，这样输入的字体大小，高度，行高和填充将“缩小”引导程序的方式？或者自己进行媒体查询会更容易吗？

Answer 1

JavaScript（jQuery）方式将是（例如）类似的东西（未经测试）：

$(window).resize(function() {
    if ($(window).width() < 768) {
        $("input").addClass("input-sm");
    }
    else if ($(window).width() >= 768 &&  $(window).width() <= 992) {
        $("input").removeClass("input-sm");
        $("input").removeClass("input-lg");
    }
    else if ($(window).width() > 992 &&  $(window).width() <= 1200) {
        $("input").addClass("input-lg");
    }
    else  {
        // do something greater screen sizes if you want
    }
});

我认为这将是一个更好的解决方案，因为编写自己的媒体查询时，您只需复制这些现有类的bootstraps CSS ......但如果您愿意，this post将是一个良好的开端。 / p>

Bootstrap3在小屏幕上用input-sm替换input-lg

1 个答案: