在 Bulma 中堆叠单选按钮

Question

在 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 是否有其他更好的方法来保持响应能力？

Answer 1

标签之间的 <br> 标签就可以了。

Answer 2

虽然 <br> 工作正常，但它不允许您在无线电选项之间灵活配置 space。例如，我可以在您的示例图像中的选项之间看到 space。

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

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

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

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

<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>

现在看起来像这样：

在 Bulma 中堆叠单选按钮

Stacking radio buttons in Bulma

html

radio-button

bulma