ようこそ!浜村拓夫の世界へ

    ブログ内検索

    最近の記事

    ブックマーク数の多い記事

    Blog Translation

    Powered By FC2ブログ

    Powered By FC2ブログ
    ブログやるならFC2ブログ


    FC2ブログ LOGIN

    with Ajax Amazon

    Bootstrapのレスポンシブデザインで、上端に空白ができるのを防ぐ方法

    このエントリーを含むはてなブックマーク はてなブックマーク - Bootstrapのレスポンシブデザインで、上端に空白ができるのを防ぐ方法 あとで読む
    CSSフレームワークの「Twitter Bootstrap」を使うと、Webデザインが楽になり、捗ります。

    しかし、Bootstrap2.3.2を使って、レスポンシブデザインで縮小した画面を表示させると、画面上部に、「謎の空白」が生じました。

    調べてみると、原因と解決方法が紹介されておりました。

    Bootstrap2.0の、navbar-fixed-topで必要なpadding-top記述場所 : Seraphimis(Tech)

    ver2.0から、デバイスの幅に合わせられるResponsive designに対応してますます便利に。

    で、navbarを上部固定にする[class属性] navbar-fixed-topを指定する場合は、bodyタグに対してnavbarの高さ分(40px)を[CSS] padding-topで追加する必要があるのだけれど、

    To make the navbar fixed to the top of the viewport, add .navbar-fixed-top to the outermost div, .navbar. In your CSS, you will also need to account for the overlap it causes by adding padding-top: 40px; to your <body>.

    http://twitter.github.com/bootstrap/components.html#navbar

    これを<body style=”padding-top: 40px”>とか、最後に読み込まれるカスタムCSSに記述したりすると、幅が狭いResponsive designの上部にその分の空白が空く。

    bootstrap-responsive.cssでpadding-top: 0pxが指定されているためで、bootstrap-responsive.cssが読まれる前までに、padding-top: 40pxを書くとうまくいく。

    <link href=”bootstrap.css” rel=”stylesheet” />
     <style type=”text/css”>
      body {
       padding-top: 40px;
      }
     </style>
    <link href=”bootstrap-responsive.css” rel=”stylesheet” />



    bootstrap-responsive.css
    を呼び出す前に、
    padding-top: 40px;
    を指定すればOKと。


    実践Webデザイン jQuery+CSSフレームワークでサクサクつくる「動き」と「仕掛け」
    ワークス
    エムディエヌコーポレーション
    2013-08-01
    2940円


    関連記事

    コメント

    コメントの投稿


    管理者にだけ表示を許可する

    トラックバック

    トラックバックURL:
    http://hamamuratakuo.blog61.fc2.com/tb.php/959-e3a464b1

    FC2Ad