Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8920

Bootstrapのフッター mt-autoの設定

$
0
0

JSPを開発していますが、デザインにはBootstrapを使用しています。

今回はヘッダーとフッターを付けよう!っていうテーマでBootstrapを調べていました。

やりたいイメージとしてはこれ
https://getbootstrap.com/docs/4.5/examples/sticky-footer-navbar/
2020-11-04_140833.png

このヘッダーとフッターの配置にしたい。

でもこうかな?と思って抜粋して色々試してみてもフッターが上手く画面下部に張り付きません。

で、サンプルダウンロードして不要そうな所消してフッターの位置だけ保持できたのがコチラ。

<!doctype html><htmlclass="h-100"><head><metacharset="utf-8"><title>Sticky Footer Navbar Template · Bootstrap</title><!-- Bootstrap core CSS --><linkhref="../assets/dist/css/bootstrap.min.css"rel="stylesheet"></head><bodyclass="d-flex h-100"><!-- Begin page content --><footerclass="footer mt-auto py-3"><divclass="container"><spanclass="text-muted">Place sticky footer content here.</span></div></footer></body></html>

HTMLとBODYにもクラスを設定しなきゃいけなくて、これによって「mt-auto」が上手く動くようになっているようです。

やっぱりコレかな?と思いながら追記していくより、不必要そうなものを消して結果を確認していく方が早く回答が得られますね。

Bootstrap便利だけど、色々ありすぎてもはやJqueryを使っている気分になりますね。


Viewing all articles
Browse latest Browse all 8920

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>