如何使单选按钮组像一个组一样起作用？

Question

I'm using Bootstrap button groups and I need to make two groups of buttons because each group of them closely relate to a single topic. But I want both groups of the buttons to act like they are in the same group. How can I do that?

<div class="btn-toolbar">
    <div class="btn-group" data-toggle="buttons-radio">
        <button class=btn>a</button>
        <button class=btn>b</button>
        <button class=btn>c</button>
    </div>
    <div class="btn-group" data-toggle="buttons-radio">
        <button class=btn>d</button>
        <button class=btn>e</button>
        <button class=btn>f</button>
    </div>
</div>

I have these, but I only want to allow user to select either a, b, c, d, e or f.

fiddle

Answer 1

I have no idea why it works...

<div class="btn-toolbar" data-toggle="buttons-radio">
    <div class="btn-group">
        <button class=btn>a</button>
        <button class=btn>b</button>
        <button class=btn>c</button>
    </div>
    <div class="btn-group">
        <button class=btn>d</button>
        <button class=btn>e</button>
        <button class=btn>f</button>
   </div>
</div>