Как иметь на группе радио кнопок, разделенных на 'btn-groups'? - PullRequest
Новая
       33

Как иметь на группе радио кнопок, разделенных на 'btn-groups'?

0 голосов
/ 01 апреля 2019

Поэтому я пытаюсь написать сайт для исследовательских проектов с разными типами / группами радиокнопок.

Одной из этих групп должен быть список из 12 кнопок, разделенных на 4 визуально различимых группы.Поскольку я новичок в html и bootstrap, я попытался решить эту проблему с помощью btn-group, которая работает в дизайне, но не функционально: bin-группа каким-то образом игнорирует название переключателей, в результате чего получается 4 функционально отличительных группы переключателей.

Мой вопрос: есть ли решение для решения этой btn-группы или лучшая рабочая альтернатива.Большое спасибо заранее!

Вот пример кода, который я хотел решить: 

<div class="form-check col-xs-12 col-sm-12 col-md-4">
  <h5>Kategorie</h5>
  <div class="btn-toolbar-vertical row col-12" role="toolbar" aria-label="Toolbar with button groups">

    <div class="btn-group-vertical btn-group-toggle col-xl-6 col-sm-6 col-md-12 col-xs-12" name="gruppe" data-toggle="buttons" role="group" id="unerwnscht">
      <label class="btn btn-danger">
                                <input type="radio" name="options" id="auswahlfrage" autocomplete="off"> Auswahlfrage
                            </label>
      <label class="btn btn-danger">
                                <input type="radio" name="options" id="ja-nein-frage" autocomplete="off"> Ja-Nein-Frage
                            </label>
      <label class="btn btn-danger">
                                <input type="radio" name="options" id="unverständlich" autocomplete="off"> Unverständlich
                            </label>
    </div>

    <div class="btn-group-vertical btn-group-toggle col-xl-6 col-sm-6 col-md-12 col-xs-12" name=grupp data-toggle="buttons" role="group" id="unerwünscht">
      <label class="btn btn-success">
                                <input type="radio" name="options" id="erzählaufforderung" autocomplete="off"> Erzählaufforderung
                            </label>
      <label class="btn btn-success">
                                <input type="radio" name="options"  id="facilitator" autocomplete="off"> Facilitator
                            </label>
      <label class="btn btn-success">
                                <input type="radio" name="options" id="bestimmungsfrage" autocomplete="off"> Bestimmungsfrage
                            </label>
    </div>
    <div class="btn-group-vertical btn-group-toggle col-xl-6  col-sm-6 col-md-12 col-xs-12" data-toggle="buttons" role="group">
      <label class="btn btn-warning">
                                <input type="radio" name="options" id="aktivität" autocomplete="off"> Nach Aktivität
                            </label>
      <label class="btn btn-warning">
                                <input type="radio" name="options" id="häufigkeit"autocomplete="off"> Nach Häufigkeit
                            </label>
      <label class="btn btn-warning">
                                <input type="radio" name="options" id="offenbarung" autocomplete="off"> Nach Offenbarung
                            </label>

    </div>
    <div class="btn-group-vertical btn-group-toggle col-xl-6  col-sm-6 col-md-12 col-xs-12" data-toggle="buttons" role="group">
      <label class="btn btn-warning">
                                <input type="radio" name="options" id="information" autocomplete="off"> Information
                            </label>
      <label class="btn btn-warning">
                                <input type="radio" name="options" id="verfügbarkeit" autocomplete="off"> Verfügbarkeit
                            </label>
      <label class="btn btn-warning">
                                <input type="radio" name="options" id="unterstützung" autocomplete="off"> Unterstützung
                            </label>

    </div>
  </div>
...