特定の画面サイズで別の行に.btn-groupを分割する

Question

私はブートストラップ4（アルファ6）で遊んでいます。私が遭遇した1つの問題は、チェックボックス/ラジオを使用してbtn-groupを作成する方法です。ページの幅が広すぎると、2行目に移動します。ですから、例えば：このドキュメントを1として

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> 

：あなたは幅CodePenをスケールダウンした場合、あなたは私が何を意味するか

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

表示されます。私が何をしたいのですが、2行目に移動することです（ページ幅に合わせるのではなく）。

これも可能ですか？

Answer 1

btn-groupは、ブートストラップ4の他の多くの要素と同様に、現在フレックスボックスを使用しています。カスタム動作を有効にする新しいflexbox utilitiesもあります。あなたは、単にflex-wrapを使用することができます。この場合

...

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

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