0

このデモ アプリhttp://twitter.github.io/bootstrap/examples/sticky-footer-navbar.htmlを使用して、Twitterbootstrap で Rails アプリのスティッキー フッターを作成しています。必須の html と css は次のとおりです。チュートリアルでは基本的に #wrap div を追加します。その下部には「#push」div があり、#wrap div の下には #footer div があり、css のおかげで何があっても下部に固定されます。

チュートリアルは、Twitter のブートストラップ アラートを考慮していないようです。私の Rails アプリでは、チュートリアルのコードを適用した後、ナビゲーション バーがある場所にアラートが配置されていたため、アラートは表示されませんでした。したがって、これを追加しました

.alert{
  margin-top: 45px;
}

ただし、アラートの下のすべても 45 ピクセル下に移動しました。

質問: .alert の下にある html を下に移動せずに .alert を 45 ピクセル下に移動する方法はありますか?

<div id="wrap">
    <div class="alert alert-success">
      <a class="close" data-dismiss="alert">×</a>
      <div id="flash_notice">Signed in successfully.</div>
    </div>

  <div class="navbar navbar-fixed-top"></div>
  <div class="container"></div>
  <div id="push"></div>

</div>
<div id="footer"></div>


css
 html,
      body {
        height: 100%;
        /* The html and body elements cannot have any padding or margin. */
      }

  /* Wrapper for page content to push down footer */
  #wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    /* Negative indent footer by it's height */
    margin: 0 auto -60px;
  }

  /* Set the fixed height of the footer here */
  #push,
  #footer {
    height: 60px;
  }
  #footer {
    background-color: #f5f5f5;
  }

  /* Lastly, apply responsive CSS fixes as necessary */
  @media (max-width: 767px) {
    #footer {
      margin-left: -20px;
      margin-right: -20px;
      padding-left: 20px;
      padding-right: 20px;
    }
  }

この画像の大きな空白は、クラス に追加margin-top: 45px;した後に html がプッシュ ダウンされた結果です。.alertここに画像の説明を入力

4

1 に答える 1

1

あなたは試すことができます 

.alert{
 position:absolute;
 right:20px;
 top:45px;
 }

これが役立つと思われる場合は、ポジショニングを調整できます。

これをテストするためのjsFiddleまたは何かがなければ、それが役立つかどうかはわかりませんが、確認するのは簡単です。

幸運を！

編集
アラートを全幅に広げたい場合は、おそらく次のようになります。 

.alert{
position:absolute;
width:90%;
right:20px;
top:45px;
]
于 2013-06-18T23:06:04.967 に答える