jquery - Twitter Bootstrap : Want the alerts not moving the rest of the page down

Question

因此，在我的用户注册(使用 Devise)中，我在注册页面的最顶部收到了错误消息。

<% if @user.errors.any? %>
  <div class="alert alert-error">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <%= devise_error_messages! %>
  </div>
<% end %>

<div><%= f.label :email %><br />
<%= f.email_field :email %></div>

<div><%= f.submit "Sign up" %></div>

但是，当我不输入任何内容并尝试注册并收到错误时，页面的其余部分将向下移动。我试图让错误仅出现在页面上方，然后拥有表单，以便我可以关闭它并且那里没有任何内容(当我关闭时，页面都不会移动)。

例如在 Twitter.com，尝试在不提供任何信息的情况下登录，Twitter 会在一个不会向下移动页面的黑色弹出框中询问您是否是人类。

我不知道如何让 bootstrap 来做到这一点。

我说的是:/image/lZPpk.jpg

Answer 1

Twitter 有一个带有 position:fixed; 的 div，这对他们来说很有效，然后他们有一个 div，其 div 内有 message 类，带有 >警报消息类。

.alert-messages {
  position: fixed;
  top: 47px;
  left: 0;
  right: 0;
  z-index: 7000;
}