如何将成组的单选按钮分为“ btn-groups”？

Question

因此，我尝试使用不同类型/组的单选按钮来编写一个研究项目网站。

这些组之一应该是12个按钮的列表，分为4个视觉上独特的组。由于我是html和bootstrap的新手，所以我尝试使用btn-group解决此问题，该功能在设计上是可行的，但在功能上不起作用：bin-group某种程度上忽略了单选按钮的名称，从而导致4个功能独特的单选按钮组。 / p>

我的问题：是否有解决此btn-group的解决方案或更好的替代方案。提前非常感谢！

在这里，我有一个示例代码说明如何解决该问题：

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