如果页面大小 < 768px，我想将我所有的 Bootstrap 切换为 mini 大小，并在大于该大小时再次恢复正常。对于所有其他控件，我使用的是 @media (max-width: 768px) { css，但我不知道要添加哪些样式来使 Bootstrap 切换 mini 大小.
我尝试过的其他方法之一是:
window.addEventListener('resize', function() {
if ($(window).width() < 768) {
$("[data-toggle='toggle']").bootstrapToggle({size: "mini"});
}
}, true);
但这会重新初始化所有 Bootstrap 切换，删除所有使用数据属性进行的设置。我也更喜欢 css 方法。
最佳答案
首先，Bootstrap 提供了许多有用的实用程序供您使用以响应屏幕尺寸，check this answer获取更多信息。从长远来看，使用这种方法可能会更好。
其次，您需要将特定的 CSS 类或 ID 赋予任何您希望通过调整大小定位的切换。 $("[data-toggle='toggle']")将选择与表单匹配的任何元素:
<tag data-toggle='toggle'>这可能意味着您页面上的所有切换。
因此将切换设置为喜欢 <input data-toggle="toggle" class="resize">并使用 $('.resize').bootstrapToggle()应该有帮助
关于javascript - 根据媒体动态更改 bootstrap-toggle 的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46214209/