Twitter BootstrapでFluidLayout使う時の、body{margin-top:60px;} の位置について
サンプル通りにやれよっていう良い例なんですが、
(Twitter Bootstrap)http://twitter.github.io/bootstrap/ で Fluid Layout 使う事よくあるんですが、
何か言われた通りやってるはずなのに、モバイル用レイアウトの時に変なpadding-topが生まれてて何だろうなぁと思ってました。
普通の幅の時
狭い幅の時
とまぁ、こんな感じです。
Fluid Layoutのサンプルのソース通りにやってるはずなのに、何でだろうなぁ感がずっとあったのですが、結論からいうと、サンプルどおりにやってませんでした☆(ゝω・)vキャピ
Fluid Layoutのサンプルのソース
多少省略してますが、ザックリ以下のような感じ。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Bootstrap, from Twitter</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="../assets/css/bootstrap.css" rel="stylesheet"> <style type="text/css"> body { padding-top: 60px; padding-bottom: 40px; } .sidebar-nav { padding: 9px 0; } @media (max-width: 980px) { /* Enable use of floated navbar text */ .navbar-text.pull-right { float: none; padding-left: 5px; padding-right: 5px; } } </style> <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet"> </head>
自分のアプリのソース
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Bootstrap, from Twitter</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link media="all" type="text/css" rel="stylesheet" href="/css/bootstrap.min.css"> <link media="all" type="text/css" rel="stylesheet" href="/css/bootstrap-responsive.min.css"> <link media="all" type="text/css" rel="stylesheet" href="/css/main.css"> </head>
bootstrap系のCSSを読んで、その後にアプリ用のCSSをまとめたmain.css
を読む感じ。
main.css
body { padding-top: 60px; padding-bottom: 40px; } .sidebar-nav { padding: 9px 0; } @media (max-width: 980px) { /* Enable use of floated navbar text */ .navbar-text.pull-right { float: none; padding-left: 5px; padding-right: 5px; } }
結論
bootstrap.css
とbootstrap-responsive.css
の間にいれろよバーカ(^q^)
つまり、bootstrap.css
-> body{padding-top:60px;}
-> bootstrap-responsive.css
が、正しい読み込み順で、これを、 bootstrap.css
-> bootstrap-responsive.css
-> body{padding-top:60px;}
だとダメなわけです。
読み込み順って大事だね☆(ゝω・)vキャピ
なので、アプリケーション用のCSSとは別に、Fluid用のCSSをかますのが良い感じです。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Bootstrap, from Twitter</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link media="all" type="text/css" rel="stylesheet" href="/css/bootstrap.min.css"> <link media="all" type="text/css" rel="stylesheet" href="/css/body.css"> <link media="all" type="text/css" rel="stylesheet" href="/css/bootstrap-responsive.min.css"> <link media="all" type="text/css" rel="stylesheet" href="/css/main.css"> </head>
こんな感じだね。body.css
の中にbodyのpadding-topが入ってる。
これで、望んだ通りの出力になりますた。
すんごい大した事じゃないんだけど、ハマってる人はきっと俺以外にもいるよね(^q^)