bootstrap-4 - 在特定屏幕尺寸下将.btn-group拆分到另一行

Question

我正在使用 Bootstrap 4(alpha 6)，并且我喜欢到目前为止所看到的。我遇到的一个问题是如何制作一个带有复选框/ radio 的btn-group，一旦页面太宽，它将移至第二行。举个例子:

http://codepen.io/youradds/pen/KaBJEm

<div class="btn-group" data-toggle="buttons">
      <label class="btn btn-secondary">
        <input type="checkbox" name="foo" class="checkbox" value="1" autocomplete="off" />
        Piscine
      </label>
      <label class="btn btn-secondary">
        <input type="checkbox" name="foo" class="checkbox" value="1" autocomplete="off" />
        Piscine
      </label>
.... loads of other buttons too
</div>

根据此文档:

http://v4-alpha.getbootstrap.com/components/buttons/#checkbox-and-radio-buttons

如果将CodePen的宽度缩小，您将明白我的意思。我想发生的是让它移到第二行(而不是强制页面宽度容纳它)。

这有可能吗？

Answer 1

像Bootstrap 4中的许多其他元素一样，btn-group现在使用flexbox。还有新的flexbox utilities启用自定义行为。

在这种情况下，您可以简单地使用flex-wrap ...

<div class="btn-group flex-wrap" data-toggle="buttons">
    ...
</div>  

https://www.codeply.com/go/8MYqS2EWGO