Bootstrap：如何使用内联无线电用于小屏幕的宽屏幕和堆叠无线电？

Question

我有3个单选按钮。对于宽屏幕（例如：PC），我想在一行中显示它们，对于小屏幕（例如：电话），我想在堆栈中显示它们。

我该怎么做？下面是我的代码，显示一行中的无线电。

    <div class="col-md-6">
        <div class="radio-list">
            <label class="radio-inline">
                <input type="radio" /> AAA
            </label>
            <label class="radio-inline">
                <input type="radio" /> BBB
            </label>
            <label class="radio-inline">
                <input type="radio" /> CCC
            </label>        
         </div>
     </div>

Answer 1

我使用CSS media queries。

代码

@media (max-width:768px) {
    .radio-inline {
        display: block;
        min-height: 20px;
        margin-top: 10px;
        margin-bottom: 10px;
        padding-left: 20px;
    }
}
@media (max-width:768px) {
    .radio-inline+.radio-inline, .checkbox-inline+.checkbox-inline {
        margin-top: auto;
        margin-left: auto;
    }
}

实施例

JSFiddle

调整结果框的大小以查看效果。