Html 无线电内联应仅适用于列lg-*、列md-*、列sm-*但不适用于列xs-*

我有一个要求，单选按钮应垂直堆叠在X列-*视图上，并应水平显示在所有其他（lg列、md列和sm列-*）视图上。目前，默认情况下，我使用radio inline水平显示单选按钮

小提琴手：

代码：

看法
记录/类别
批处理

问题:

---

“radio inline”css类如何仅在col lg-、col md-、col sm-*（宽度基于媒体查询）期间应用，而不是在col xs-*？

您需要应用一些不同的样式来覆盖

。radio inline

样式。在与引导

xs

大小匹配的媒体查询中应用它们，如下所示：

---

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

解决方案1:

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

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

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

解决方案2:

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

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

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

记录/类别
@介质（最大宽度：768px）/*>=768px（小型平板电脑）*/
{
.foo类
{
位置：相对位置；
显示：内联块；
左侧填充：20px；
页边距底部：0；
字体大小：400；
垂直对齐：中间对齐；
光标：指针；
}
}

您使用的变量更少吗？不确定OP是否包含更少的内容。另外，这是

md

大小，而不是

xs

大小。最后，

的注释覆盖默认值

是没有用的。需要覆盖哪些样式？