无线电内联应仅适用于col-lg- *，col-md- *，col-sm- *，但不适用于col-xs- *

Question

我有一个要求，即单选按钮应垂直堆叠在col-xs- *视图上，并应在所有其他按钮上水平显示（col-lg- ，col-md - 和col-sm- *）查看。目前，我正在使用radio-inline默认水平显示单选按钮。

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

问题：

如何仅在col-lg- ，col-md - ，col-sm- *（基于媒体查询的宽度）期间应用'radio-inline'css类，但不在col上-xs - ？*

Answer 1

您需要应用几种不同的样式来覆盖.radio-inline样式。将它们应用于与Bootstrap xs大小匹配的媒体查询中，如下所示：

Working Fiddle

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

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

注意：这些样式需要在引导样式表之后加载，否则它们不会覆盖！

Answer 2

解决方案1：

odbc.ini

解决方案2：

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

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