Question

我正在玩 Bootstrap 4（alpha 6），我喜欢到目前为止看到的内容。我遇到过的一个问题是，如何使用复选框/无线电进入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拆分到另一条线上

1 个答案: