groupe de boutons n'enroulant trop longtemps quand

Question

J'ai un groupe de boutons très longue: 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> 

Quelle que soit la taille de la fenêtre, il prend toujours une longue ligne faisant défiler.

Est-il possible de faire envelopper de sorte que sur les plus petites fenêtres il s'enroulera sur plus de lignes sans provoquer le défilement?

Si aucune alternative (s) dois-je avoir pour obtenir le comportement attendu?

Answer 1

Ajoutez flex-wrap: wrap; au parent flexible (.btn-group) si vous souhaitez que les enfants flex puissent envelopper.