按鈕組時過長

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