new takyam();

Qiitaぽい話はQiitaに書いていくことにする気がする http://qiita.com/takyam

Twitter BootstrapでFluidLayout使う時の、body{margin-top:60px;} の位置について

サンプル通りにやれよっていう良い例なんですが、
(Twitter Bootstrap)http://twitter.github.io/bootstrap/Fluid Layout 使う事よくあるんですが、
何か言われた通りやってるはずなのに、モバイル用レイアウトの時に変なpadding-topが生まれてて何だろうなぁと思ってました。

普通の幅の時

f:id:takyam1213:20130708001626j:plain

狭い幅の時

f:id:takyam1213:20130708001634j:plain

とまぁ、こんな感じです。

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.cssbootstrap-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が入ってる。
これで、望んだ通りの出力になりますた。

f:id:takyam1213:20130708002909j:plain

すんごい大した事じゃないんだけど、ハマってる人はきっと俺以外にもいるよね(^q^)