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

Question

我正在玩 Bootstrap 4 (alpha 6)，我很喜欢目前看到的内容。我遇到的一个问题是如何制作一个带有 checkbox/radios 的 btn-group，一旦页面变得太宽，它就会移动到第二行。举个例子：

<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 像许多其他元素一样 Bootstrap 4、现在使用flexbox。还有新的 flexbox utilities 来启用自定义行为。

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

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

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

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

Split .btn-group onto another line, at certain screen sizes

bootstrap-4

twitter-bootstrap-4