按钮组时过长

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的父母（.btn-group）添加flex-wrap: wrap;。