グリッドシステムのカードの配置ってデフォルトで左寄せなんですよね。
「bootstrap グリッドシステム 中央寄せ」で調べたら解決しました。
1 |
justify-content-center |
これをクラスに入れるだけです。
つまり
1 2 3 4 5 6 7 8 9 10 |
<div class="row row-cols-auto justify-content-center" style="margin: 0px auto;"> <div class="col m-2 bg-light shadow" style="width: 18rem;"> <div class="card-body" style="overflow:hidden;"> <h1 class="card-title" style="font-size: 3rem; float:left;">1</h1> <p class="card-text" style="font-size:1.25rem; float:right;">テスト</p> <div class="col m-2 bg-light shadow" style="width: 18rem;"> <div class="card-body" style="overflow:hidden;"> <h1 class="card-title" style="font-size: 3rem; float:left;">2</h1> <p class="card-text" style="font-size:1.25rem; float:right;">テスト</p> </div> |
みたいな感じでやれば画面真ん中を基軸にして動いてくれる感じになります。
なかなかここにたどり着くのに時間かかりました。答えがわかれば「あ~それだけか~」なんだけれども。
コメント