Question

如何在桌面视图上采用水平放置的一组单选按钮，并将其更改为在移动视图上垂直对齐使用CSS 。

这是我的例子：

<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

@media (max-width: 479px) {
  .radio-inline {
    display: block;
    padding: 10px 20px; /* optional */
  }
}

显然，Bootstrap会向10px添加.radio-inline+.radio-inline左边距。为了覆盖它，你需要一个更强大的选择器。

Answer 2

只有当屏幕大小为xs时，才可以通过直接修改bootstrap .radio-inline类来使用CSS实现此目的。通过将display: block应用于课程，他们将根据您的需要进行展示。

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

请记住，很多人不喜欢直接搞乱框架的类。我个人并不介意（只要它不是你正在修改的填充或％引导程序）

Bootstrap＆＃39; .radio-inline＆＃39;单选按钮到“垂直”按钮在XS模式下使用css

2 个答案: