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父级（.btn-group）。

Answer 2

对于React-Bootstrap用户：

<ButtonGroup style={{ flexWrap: "wrap" }}>
...
</ButtonGroup>

按钮组太长时间不包装

2 个答案: