Группа кнопок бутстрапа (радио) в нескольких строках

Question

У меня есть группа кнопок из нескольких элементов, которые должны вести себя как переключатели. Мне также нужно, чтобы они были разбиты на несколько рядов и охватывали всю ширину контейнера.

С этой целью я использовал класс bootstrap btn-group-justified, и я разделил элементы <input type="radio"> на несколько групп кнопок, сохраняя одно и то же имя.

Это выглядит нормально, но имеет побочный эффект от кнопок, не переключающих элементы в других группах, хотя они имеют одинаковые name. То есть перестают вести себя как переключатели в той же группе.

Jsfiddle here. Как вы можете видеть, если вы выберете кнопку в первой строке, а затем нажмите один на второй, первый элемент не будет отключен.

Есть ли способ получить группу кнопок с несколькими строками без взлома поведения радиосвязи вместе с javascript?

Answer 1

Вместо того, чтобы иметь это для двух групп <div class="btn-group btn-group-sm btn-group-justified" role="group" data-toggle="buttons"> просто имейте это наверху, но без btn-group-justified. Тогда для двух групп просто сделайте <div class="btn-group-justified"> ... your buttons here ...</div>.

Надеюсь, это поможет.

Answer 2

Это сделало трюк.

http://www.bootply.com/k067OmtNXt

<div data-toggle="buttons"> 
    <div class="btn-group btn-group-justified"> 
     <label class="btn btn-default"> 
      <input type="radio"> Lorem 
     </label> 
    </div> 
    <div class="btn-group btn-group-justified"> 
     <label class="btn btn-default"> 
      <input type="radio"> ipsum 
     </label> 
    </div> 
</div>