【Bootstrap4】横並びボタングループをレスポンシブ対応させて縦並びに切り替える方法
『Bootstrap4』の「横並び」ボタングループをレスポンシブに対応させて、「縦並び」に切り替える方法をご紹介します。
実装方法
Bootstrap4の表示ユーティリティ（Display property）を用います。
極小 縦向きモバイル （xs：横幅576px未満 ）で切り替え
ソース
<!--横並びボタン--> <div class="d-none d-sm-block"> <div class="btn-group d-flex"> <a href="#" class="btn btn-primary">ボタン1</a> <a href="#" class="btn btn-primary">ボタン2</a> <a href="#" class="btn btn-primary">ボタン3</a> <a href="#" class="btn btn-primary">ボタン4</a> <a href="#" class="btn btn-primary">ボタン5</a> </div> </div> <!--//横並びボタン--> <!--縦並びボタン--> <div class="d-block d-sm-none"> <div class="btn-group-vertical d-flex"> <a href="#" class="btn btn-primary">ボタン1</a> <a href="#" class="btn btn-primary">ボタン2</a> <a href="#" class="btn btn-primary">ボタン3</a> <a href="#" class="btn btn-primary">ボタン4</a> <a href="#" class="btn btn-primary">ボタン5</a> </div> </div> <!--縦並びボタン-->
表示
小 横向きモバイル （sm：横幅768px未満）で切り替え
ソース
<!--横並びボタン--> <div class="d-none d-md-block"> <div class="btn-group d-flex"> <a href="#" class="btn btn-primary">ボタン1</a> <a href="#" class="btn btn-primary">ボタン2</a> <a href="#" class="btn btn-primary">ボタン3</a> <a href="#" class="btn btn-primary">ボタン4</a> <a href="#" class="btn btn-primary">ボタン5</a> </div> </div> <!--//横並びボタン--> <!--縦並びボタン--> <div class="d-block d-md-none"> <div class="btn-group-vertical d-flex"> <a href="#" class="btn btn-primary">ボタン1</a> <a href="#" class="btn btn-primary">ボタン2</a> <a href="#" class="btn btn-primary">ボタン3</a> <a href="#" class="btn btn-primary">ボタン4</a> <a href="#" class="btn btn-primary">ボタン5</a> </div> </div> <!--縦並びボタン-->
表示
中 タブレット （md：横幅992px未満）で切り替え
ソース
<!--横並びボタン--> <div class="d-none d-lg-block"> <div class="btn-group d-flex"> <a href="#" class="btn btn-primary">ボタン1</a> <a href="#" class="btn btn-primary">ボタン2</a> <a href="#" class="btn btn-primary">ボタン3</a> <a href="#" class="btn btn-primary">ボタン4</a> <a href="#" class="btn btn-primary">ボタン5</a> </div> </div> <!--//横並びボタン--> <!--縦並びボタン--> <div class="d-block d-lg-none"> <div class="btn-group-vertical d-flex"> <a href="#" class="btn btn-primary">ボタン1</a> <a href="#" class="btn btn-primary">ボタン2</a> <a href="#" class="btn btn-primary">ボタン3</a> <a href="#" class="btn btn-primary">ボタン4</a> <a href="#" class="btn btn-primary">ボタン5</a> </div> </div> <!--縦並びボタン-->
表示
大 デスクトップ （lg：横幅1200px未満）で切り替え
ソース
<!--横並びボタン--> <div class="d-none d-xl-block"> <div class="btn-group d-flex"> <a href="#" class="btn btn-primary">ボタン1</a> <a href="#" class="btn btn-primary">ボタン2</a> <a href="#" class="btn btn-primary">ボタン3</a> <a href="#" class="btn btn-primary">ボタン4</a> <a href="#" class="btn btn-primary">ボタン5</a> </div> </div> <!--//横並びボタン--> <!--縦並びボタン--> <div class="d-block d-xl-none"> <div class="btn-group-vertical d-flex"> <a href="#" class="btn btn-primary">ボタン1</a> <a href="#" class="btn btn-primary">ボタン2</a> <a href="#" class="btn btn-primary">ボタン3</a> <a href="#" class="btn btn-primary">ボタン4</a> <a href="#" class="btn btn-primary">ボタン5</a> </div> </div> <!--縦並びボタン-->
表示
横ボタンと縦ボタンの種類を用意しないといけないのでスマートなやり方とは言えませんが、現状これがベストかと思います。
- Bootstrapで良く使うけど忘れがちなCSSスタイルまとめ
- Bootstrapをカスタマイズして軽量化する方法
- ホームページ作成にBootstrapの使用をお勧めする8つの理由
[amazonjs asin=”4297100207″ locale=”JP” title=”Bootstrap 4 フロントエンド開発の教科書”]
