Укладка радиокнопок в булме

Question

Есть ли правильный способ сложить радио кнопки в Bulma?

Их пример размещает каждую кнопку на одной строке:

<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>, или у Булмы есть другой лучший способ поддержкиотзывчивость

Answer 1

Хотя <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>

Теперь это выглядит так:

Answer 2

Метка <br> между метками будет работать нормально.