メディアに応じてブートストラップトグルのサイズを動的に変更してください

Question

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

まず、ブートストラップは、画面サイズに応じて使用するための多くの便利なユーティリティを提供します。詳細についてはcheck this answerを参照してください。このアプローチを使用すると、おそらく長期的には良いでしょう。

第2に、サイズ変更でターゲットにするトグルに特定のCSSクラスまたはIDを指定したい場合があります。 $("[data-toggle='toggle']")フォームに一致する要素を選択します： <tag data-toggle='toggle'>これはおそらくページ上のすべてのトグルを意味します。

ので<input data-toggle="toggle" class="resize">を好きにトグルを設定し、$('.resize').bootstrapToggle()を使用して