按钮组太长时间不包装

Question

我有一个很长的按钮组:https://jsfiddle.net/cyu4bvak/

<div class="btn-group" data-toggle="buttons">
    <label  class="btn btn-primary active">
        <input type="checkbox" />ABCDEFGHIJKLMNOPQRSTUVWXYZ
    </label>
    <label  class="btn btn-primary active">
        <input type="checkbox" />ABCDEFGHIJKLMNOPQRSTUVWXYZ
    </label>
    <label  class="btn btn-primary active">
        <input type="checkbox" />ABCDEFGHIJKLMNOPQRSTUVWXYZ
    </label>
    ...
</div>

无论视口的大小如何,它总是需要一条长行来导致滚动.

是否有可能使其包裹,以便在较小的视口上它将包裹更多的线而不会导致滚动？

如果没有哪个替代方案我必须获得预期的行为？

Answer 1

如果要将flex子项包装,请添加flex-wrap: wrap;到flex parent(.btn-group).