twitter-bootstrap - 使用 css 在 XS 模式下将 '.radio-inline' 单选按钮 Bootstrap 至 'vertical'

Question

如何使用 CSS 将桌面 View 中水平排列的一堆单选按钮更改为在移动 View 中垂直对齐。

这是我的例子:

<div class="row">
<div class="col-md-12">
    <fieldset>
        <legend>- fellow stackoverflower, please choose a radio button</legend><br>
        <label class="radio-inline">
            <input type="radio" name="optionsRadios" value="1" checked="checked">radio number 1
        </label>                
        <label class="radio-inline">
            <input type="radio" name="optionsRadios" value="2">radio number 2
        </label>
        <label class="radio-inline">
            <input type="radio" name="optionsRadios" value="3">radio number 3
        </label>
        <label class="radio-inline">
            <input type="radio" name="optionsRadios" value="4">radio number 4
        </label>
        <label class="radio-inline">
            <input type="radio" name="optionsRadios" value="5">radio number 5
        </label>
    </fieldset>
</div>

http://www.bootply.com/zPwSnZjDoQ

我可以使用 JQuery 实现所需的布局，例如

$('label').removeClass('radio-inline').addClass('radio col-xs-offset-1')

Answer 1

当屏幕尺寸为 xs 时，您可以仅通过直接修改 Bootstrap .radio-inline 类来使用 CSS 实现此目的。通过将 display: block 应用于类，它们将按您的意愿显示。

@media (max-width: 768px){ 
  .radio-inline{
  display: block; 
  }
}

请记住，很多人不喜欢直接搞乱框架的类。我个人不介意(只要它不是您要修改的填充或 % of bootstrap)