radio-inline sollte nur für col-lg- *, col-md- *, col-sm- *, aber nicht für col-xs- *

Question

gelten Ich habe eine Anforderung, wo die Optionsfelder vertikal auf col- Stapel xs- * view und sollte horizontal auf allen anderen anzeigen (col-lg-, col-md- und col-sm- *) anzeigen. Derzeit verwende ich Radio-Inline, um die Radiobuttons standardmäßig horizontal anzuzeigen.

Fiedler: https://jsfiddle.net/Vimalan/hh9qtbfj/

Code:

<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> 

Frage:

Wie die 'Radio-inline' CSS-Klasse nur während col-lg- , col-MD- angewendet werden , col-sm- * (Breiten basierend auf Medienabfrage), aber nicht auf col-xs- *?

Answer 1

Sie müssen einige verschiedene Stile anwenden, um die .radio-inline Stile zu überschreiben. Wenden Sie sie in einer Medien Abfrage, die die Bootstrap xs Größe entspricht, etwa so:

Working Fiddle

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

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

Hinweis: benötigen Diese Stile nach dem Bootstrap Sheet zu laden, sonst werden sie nicht außer Kraft setzen !

Answer 2

Lösung 1:

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

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

Lösung 2: dort

<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; 
} 
}