粘性页脚会丢弃警报消息的定位

Question

我正在使用此演示应用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;
}

但它也将警报下方的所有内容都降低了45px。

问题：有没有办法将.alert降低45 px而不移动它下面的html？

<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;添加到.alert课程后html被推倒的结果

Answer 1

你可以尝试

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

如果这似乎有帮助，那么你可以改进定位。

没有jsFiddle或其他东西来测试这个，我不确定它是否有用，但很容易检查。

祝你好运！

EDIT
如果您希望警报跨越整个宽度，可能类似于：

.alert{
position:absolute;
width:90%;
right:20px;
top:45px;
]