根据媒体动态更改引导程序切换大小

如果页面大小为< 768px，我想使所有引导程序切换为mini，并且一旦超过此大小，就会恢复正常。对于我使用的所有其他控件@media (max-width: 768px) { css，但我无法弄清楚添加什么样式来使引导程序切换mini大小。根据媒体动态更改引导程序切换大小

一个我想其他的办法是：

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

    }, true);

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

来源

2017-09-14 Archeg

首先，Bootstrap为您提供了很多有用的工具来响应屏幕尺寸，更多信息请参阅check this answer。从长远来看，使用这种方法可能会更好。其次，你会想给你一个特定的CSS类或ID给你想要调整大小的目标。 $("[data-toggle='toggle']")将选择与表单匹配的任何元素： <tag data-toggle='toggle'>并且这可能意味着您的页面上的所有切换。

所以设置拨动喜欢<input data-toggle="toggle" class="resize">和使用$('.resize').bootstrapToggle()应该帮助

来源

2017-09-14 08:44:42 DrSatan1

特定的CSS类是问题之一。另一个 - 我需要用'$（“。mytoggle”）清除bootstrapToggle。bootstrapToggle（'destroy'）;'在设置'$（“。mytoggle”）之前。bootstrapToggle（{size：“mini”}）'但我可以把这当作答案，因为这部分回答了这个问题 – Archeg

根据媒体动态更改引导程序切换大小

回答

相关问题