ラジオインラインは、col-lg- *、col-md- *、col-sm- *のみに適用する必要がありますが、col-xs-では使用できません。

Question

ラジオボタンは、 xs- *ビューであり、他のすべてのビュー（col-lg-、col-md-およびcol-sm- *）ビューでは水平に表示されます。現在、ラジオボタンをデフォルトで横に表示するにはラジオインラインを使用しています。

フィドラー：https://jsfiddle.net/Vimalan/hh9qtbfj/

コード：

<div class="form-horizontal"> 
    <div class="form-group"> 
     <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label">View</label> 
     <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12"> 
      <label class="radio-inline"> 
       <input type="radio" name="inlineRadioOptions" value="Record/Category" /> 
       Record/Category 
      </label> 
      <label class="radio-inline"> 
        <input type="radio" name="inlineRadioOptions" value="Batch" /> 
        Batch 
      </label> 
     </div> 
    </div> 
</div> 

質問：

'ラジオ・インライン' CSSクラスが中にのみ適用される方法COL-LG- 、COL-MD- 、col-sm- *（メディアクエリに基づく幅）ですが、col-xs- *ではなく？

Answer 1

.radio-inlineスタイルをオーバーライドするには、いくつかの異なるスタイルを適用する必要があります。

Working Fiddle

@media only screen and (max-width: 480px) { 
    .radio-inline { 
    display: block; 
    } 

    .radio-inline + .radio-inline { 
    margin-left: 0; 
    } 
} 

注：これらのスタイルは、ブートストラップスタイルシート後をロードする必要がありそうでない場合は、彼らが上書きされることはありませんので、同じように、ブートストラップxsサイズに一致するメディアクエリでそれらを適用します！

Answer 2

解決策1：

@media (max-width: 768px) /* >= 768px (small tablet) */ 
{ 

.radio-inline 
{ 
// override the default value 
} 
} 

ソリューション2：

<label class="foo-class"> 
    <input type="radio" name="inlineRadioOptions" value="Record/Category" /> 
     Record/Category 
</label> 

@media (max-width: 768px) /* >= 768px (small tablet) */ 
{ 

.foo-class 
{ 
    position: relative; 
    display: inline-block; 
    padding-left: 20px; 
    margin-bottom: 0; 
    font-weight: 400; 
    vertical-align: middle; 
    cursor: pointer; 
} 
}