書いた理由
-
フォームのデザイン時に横並びの複数のボタンを配置する際、以下のようなイメージで、複数のボタンをボタングループにしたくないが、まとめて中央寄せにしたいとなった。
-
さっくり行けるかと思ったが、案外悩んだので忘れないように書いておくことにした。
結論
See the Pen Bootstrap4: Centering buttons not Button-Group by Yui Nishimura (@yui728) on CodePen.
解説
20行：<div class="form-group row justify-content-center">
-
form-group：フォーム内の要素をグループ化 -
row：グリッドレイアウトにおける行 -
justify-content-center：flexboxレイアウトでコンテナ内部の要素を中央揃えにする
21行：<div>
- 前述した
justify-content-centerで中央揃えにされる要素
22行,23行：<input type="submit"... />,<input type="button"... />
- 中央揃えにしたいボタン
なぜ、<div class="form-group row justify-content-center">直下にて、<div>でもう一段階まとめなければならないか？
公式ドキュメントのFlex：Justify contentを見ると分かるように、justify-content-centerで中央揃えとした場合は、直下コンテナ間のmarginが無視されるため。
CodePenで実験すると、確かに2つのボタン同士がくっついた状態になる。
See the Pen Bootstrap4: Centering buttons not Button-Group: if Div directly below Div with "row justify-content-center" class attribute is nothing by Yui Nishimura (@yui728) on CodePen.