在布尔玛堆叠单选按钮

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>可以正常工作，但是它不允许您灵活配置单选选项之间的空间。例如，我可以在示例图像中看到选项之间的空格。

为了实现这一点，我在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>

现在看起来像这样：