あれ?offsetが効かないんだけど・・・?
どうも、ClojureのLuminusフレームワークを使ってWeb開発をしている学生です。
いつものように hiccup で
(defn home-page []
[:div.container ;; コンテナを作って
[:div.row.justify-content-center ;; row を作って
[:div.col-md-4.col-sm-offset-4 ;; 12等分して左4つを空けてそこから4つ分のところに
[:button.btn-primary "Login"]] ;; button を置いてください
]
])
として、html側で
<div class="container">
<div class="row justify-content-center">
<div class="col-md-4 col-md-offset-4">
<button class="btn-primary">Login</button>
</div>
</div>
</div>
としてうまく動くかなーと思ったんですが、うまくセンタリングされませんでした。
結論から言うと、Bootstrap のバージョンを確認しろ 、ということです。
Bootstrap ver 3.0
上のコードでセンタリングされるようです。
Bootstrap ver 4.1
col-md-offset-4
を offset-md-4
としましょう。
具体例 (Bootstrap ver 4.1)
(defn home-page []
[:div.container
[:div.row.justify-content-center
[:div.col-md-4.offset-4
[:button.btn-primary "Login"]]
]
])
<div class="container">
<div class="row justify-content-center">
<div class="col-md-4 offset-4">
<button class="btn-primary">Login</button>
</div>
</div>
</div>