0

を使用Grails 2.1.0しTwitter Bootstrap Plugin 2.1.1ていますが、で問題が発生していnavbar-fixed-topます。

サイズ変更中にNavbarをページの上部に固定して正しく動作させるために、TwitterBootstrapDocsは次のように述べています。

.navbar-fixed-topを追加し、その下の非表示領域を考慮して、に少なくとも40pxのパディングを追加することを忘れないでください。これは、コアBootstrap CSSの後、オプションのレスポンシブCSSの前に必ず追加してください。

GrailsプラグインforTwitterBootstrapを使用する場合、どうすればこれを行うことができますか？

これが私が試したことです：

main.gsp

<head>
  ...
  <r:require modules="bootstrap-css"/>
  <style type="text/css">
    body {
      padding-top: 60px;
      padding-bottom: 40px;
    }
    .sidebar-nav {
      padding: 9px 0;
    }
  </style>
  <r:require modules="bootstrap-responsive-css"/>
  <r:layoutResources/>
</head>

問題は、Grails Plugin for Twitter Bootstrapがコンテンツを取得bootstrap.cssしbootstrap-responsive.css、それらを次のマージされたファイルに結合することですstatic/bundle-bundle_bootstrap_head.css。

したがって、Twitter Bootstrapのドキュメントにあるように、「コアBootstrap CSSの後、レスポンシブCSSの前」に本文のパディングスタイルを設定することはできません。

上記のmain.gspから取得したソースHTMLの表示は次のとおりです。

<style type="text/css">
  body {
    padding-top: 60px;
    padding-bottom: 40px;
  }
  .sidebar-nav {
    padding: 9px 0;
  }
</style>

<link href="/homes/static/bundle-bundle_bootstrap_head.css" type="text/css" 
    rel="stylesheet" media="screen, projection" />

これを行う方法がない場合は、いつでもGrails Twitter Bootstrapプラグインをドロップし、手動でTwitter Bootstrapをダウンロードして、Grailsプロジェクトの、、、およびに配置することがweb-app/cssできweb-app/imagesますweb-app/js。ただし、GrailsTwitterBootstrapプラグインを使用できるようにしたいと思います。

よろしくお願いします！

4

1 に答える 1

6

画面の幅がナビゲーションバーを下回ると（ではなく）980pxになるため、Bootstrapはスタイルにその場所を推奨します。したがって、モバイルデバイスの上部にある空白スペースからの防止の後に呼び出す（そのパディングを埋めるためのfxed要素はありません）。staticfixedbootstrap-responsive.csspadding

メディアクエリを使用して、この動作を再現できます。

@media (min-width:980px) {
    body {
        padding-top: 40px;
    }
}

このCSSをスタイルシートの任意の場所に配置し、心配する必要はありません。<links>

于 2012-09-12T15:36:14.517 に答える