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

【问题标题】：Bootstrap3 Replace input-lg with input-sm on small screensBootstrap3 在小屏幕上用 input-sm 替换 input-lg
【发布时间】：2016-12-14 06:08:30
【问题描述】：

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

【问题讨论】：

您只需将 input-sm 类与您拥有的输入 lg 一起添加，例如：如果您有您可以使其成为以便它根据您使用的屏幕进行自我调整。 bootstrap.js 文件中已经编写了 Javascript。希望这会有所帮助！
@PrashanthBenny 据我所知，这只会影响输入元素的宽度，但不会影响高度、行高和字体大小...
@PrashanthBenny 这些是用于网格的

标签： twitter-bootstrap css media-queries

【解决方案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 将是一个好的开始。

【讨论】：

正是我需要的。非常感谢。还要感谢额外的屏幕尺寸，尽管我只需要 768。查看我的编辑。
是的，随意使用。您的编辑可以作为版本答案发布，因为它删除了一些屏幕尺寸 - 此解决方案更通用。