Question

如果页面大小＆lt;

我想制作mini大小的所有引导切换。 768px并且一旦超过那个就再次恢复正常。对于我使用@media (max-width: 768px) { css的所有其他控件，但我无法确定要添加哪些样式以使引导切换mini大小。

我尝试的其他方法之一是：

window.addEventListener('resize', function() {
        if ($(window).width() < 768) {
            $("[data-toggle='toggle']").bootstrapToggle({size: "mini"});
        }

    }, true);

但是，重新初始化所有引导切换，删除所有使用数据属性进行的设置。我也更喜欢css方法。

Answer 1

首先，Bootstrap提供了许多有用的实用程序供您用于响应屏幕大小check this answer以获取更多信息。从长远来看，使用这种方法可能会更好。

其次，您需要为要使用调整大小定位的任何切换提供特定的CSS类或ID。 $("[data-toggle='toggle']")将选择与表单匹配的任何元素： <tag data-toggle='toggle'>这可能意味着您网页上的所有内容都会切换。

因此，将切换设置为赞[{1}}并使用<input data-toggle="toggle" class="resize">应该有帮助

根据媒体动态更改bootstrap-toggle的大小

1 个答案: