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

Question

我在所有输入上都使用了 Twitter bootstrap 的 input-lg 类。有没有一种(也许是 javascript)方法可以在较小的屏幕上用 twitter bootstrap 的 input-sm 替换它，以便输入的字体大小、高度、行高和填充将“缩小”bootstrap 方式？或者自己做媒体查询会更容易吗？

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

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