라디오 인라인은 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; 
} 
}