ブートストラップの使用：オブジェクトが表示されているときにクラスを追加するには-xs visible-sm？

Question

私はこの問題の解決策を見つけようとしていました。私はオンラインで回答を見つけることができませんでした。残念ながら、私のjavascriptのスキルはあまり良くありません。私はこれを行う方法の基本的なコンセプトを理解しています。唯一の問題は、その入力をどのように呼び出すかと、可視モードでのみ行うことです。

<div class="col-sm-6 visible-xs visible-sm"> 
     <label for="date">Desired Date:</label> 
     <input name="date" type="date" id="mobiledateinput"> 
</div> 

私はこれが何とかjavascriptで解決される必要があることを知っています。あなたが前の期間を持っていない場合、私は得ることができたとして相続人は近くに

$(document).ready(function(){ 
       $("mobiledateinput, visible-xs").each(function() { 
       $(this).addClass('validate-required'); 
      }); 
     }); 

Answer 1

あなたのセレクタは

$(".mobiledateinput, .visible-xs") 

する必要があり、jQueryのは、あなたがCSSクラスに参照のうえいる知りません。

Answer 2

visible-smクラスでは、ブートストラップによって追加され、可視になるとアクションが発生するので、[visible-xs visible-sm]に注意する必要はありません ので、クラスを追加するために、私はクラスを使用することをお勧めします

$(document).ready(function(){ 
      $("#mobiledateinput").each(function() { 
       var $this = $(this) //to cash this object in the var $this 
       $this.addClass('validate-required'); 
     }); 

    }); 

....それはなります#mobiledateinputを持つすべての入力に検証し、必要な.mobiledateinput代わりにIDのIDは、ページ内の1つの要素に対してでなければならないため。

Answer 3

CSSの手法であるメディアクエリを使用できます。

たとえば、

@media only screen and (max-width: 500px) { 
    body { 
     background-color: lightblue; 
    } 
} 

つまり、クラスの比率を変更することができます。

visible-xsブレークポイントは（最大幅：768px）です。ブートストラップのWebサイトですべてのブレークポイントを見つけることができます。