LoginSignup
0
0

More than 5 years have passed since last update.

Bootstrap ver 4.1 3.0でのoffsetの扱い

Last updated at Posted at 2018-06-14

あれ?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-4offset-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>

image.png

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0