在布尔玛堆叠单选按钮答案

【问题标题】：Stacking radio buttons in Bulma在布尔玛堆叠单选按钮
【发布时间】：2018-06-12 19:38:16
【问题描述】：

在 Bulma 中堆叠单选按钮是否有正确的方法？

他们的example 将每个按钮放在同一行：

<div class="control">
  <label class="radio">
    <input type="radio" name="foobar">
    Foo
  </label>
  <label class="radio">
    <input type="radio" name="foobar" checked>
    Bar
  </label>
</div>

我希望得到这样的东西：

是否会像添加 <br> 标签一样直接，或者 Bulma 是否有其他更好的方法来保持响应能力？

【问题讨论】：

标签： html radio-button bulma

【解决方案1】：

标签之间的<br> 标签可以正常工作。

【讨论】：

【解决方案2】：

虽然<br> 工作正常，但它不允许您灵活地配置单选选项之间的空间。例如，我可以在您的示例图片中看到选项之间的空格。

为了实现这一点，我在我的 SCSS 中添加了以下类：

.radio-list {
  .radio {
    display: block;

    & + .radio {
      margin-left: 0;
      margin-top: .5em;
    }
  }
}

现在只需将 radio-list 类添加到您的控件中，如下所示：

<div class="control radio-list">
  <label class="radio">
    <input type="radio" name="foobar">
    Foo
  </label>
  <label class="radio">
    <input type="radio" name="foobar" checked>
    Bar
  </label>
</div>

现在看起来像这样：

【讨论】：