css - 按钮组过长时不换行

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>

无论视口(viewport)大小如何，它总是占用 一长行导致滚动 .

有没有可能把它包起来这样在较小的视口(viewport)上它将包裹更多行而不会导致滚动？

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

Answer 1

添加 flex-wrap: wrap;如果您希望 flex 子代包裹，则发送给 flex 父代 (.btn-group)。