Twitter bootstrap 引导程序&x27；。无线内联'；单选按钮至'；垂直'；在XS模式下使用css

您将如何使用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>

---

显然，Bootstrap将

10px

左边距添加到

.radio inline+.radio inline

。为了覆盖这一点，您需要一个更强大的选择器。

只有在屏幕大小为xs时直接修改引导

.radio inline

类，才能使用CSS实现这一点。通过对类应用

display:block

，它们将根据您的需要显示

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

---

请记住，很多人不喜欢直接干扰框架的类。我个人不介意（只要您修改的不是填充或引导的%）

col xs是768px？你确定？绝对是@Stavm。检查bootstrap grid和pic：但是，这在bootstrap 4上发生了变化，现在默认情况下，bootstrap从

767px

和向下定义

col xs

。然而，定义较低的断点来区分非常小的手机和屏幕较宽的手机是很常见的。基于大量客户请求，我个人更喜欢使用

540px

作为断点。请注意，您实际上可以在Bootstrap3及更高版本中定义自己的断点，包括自定义断点。你问我很好。看起来像是因为v3.0.1

xs

在默认情况下定义为低于480px:）。我不知道。在大多数基于引导的项目中，我通常使用540 px作为断点。

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

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