在某些屏幕尺寸下将.btn-group拆分到另一条线上

Question

我正在玩Bootstrap 4(alpha 6),我喜欢到目前为止看到的内容.我遇到的一个问题是如何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

将btn-group在引导4像许多其他因素,现在使用Flexbox的.还有一些新的flexbox实用程序可用于启用自定义行为.

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

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

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