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 向下移动 45 像素，而不会将其下方的 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 被下推的结果在此处输入图像描述

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 回答