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

Question

我在所有输入中都使用 Twitter bootstrap 的 input-lg class。有没有一种方法（也许 javascript）可以在较小的屏幕上用 twitter bootstrap 的 input-sm 替换它，这样输入的字体大小、高度、行高和填充将 "shrink" 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
    }
});

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

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

Bootstrap3 Replace input-lg with input-sm on small screens

css

media-queries

twitter-bootstrap