Twitter Bootstrap:希望警报不会移动页面的其余部分

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会询问你是否是黑人弹出框中没有移动页面的人.

我对如何获得引导来做这件事感到茫然.

我所说的是:http://i.imgur.com/UUYLkax.jpg

Answer 1

Twitter有一个div,position: fixed;它可以为他们提供技巧,然后他们有一个div与messagediv里面的alert-messages类一起使用.

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

Answer 2

实际上找到了最好的方法来做到这一点。

首先，从Nijikokun 的 bootstrap-notify下载文件并将其放入您的项目中。

然后，添加将在 application.html.haml 文件底部显示 Flash 的代码片段（我使用的可能是 .html.erb）。我的看起来像（在 HAML 中）：

- flash.each do |key, value|
  .notifications.top-center
    %div{class: "alert alert-#{key} in fade"}
      %button.close{"data-dismiss" => "alert", type: "button"} ×
      -if value.is_a?(String)
        = value
      -else
        -if value.nil?
          = devise_error_messages
        -else
          - value.each do |msg|
            %li
              = msg

基本上，这将执行的操作是遍历它并检查是否有除常规字符串之外的其他内容。如果它只是一个字符串（意味着它不是字符串数组），请将其发布。然后，如果它不是字符串，您需要检查它是否为 nil，如果是，则将是设计错误消息（如果您有设计）。如果您没有设计或不想要设计错误消息，只需跳过这一- if value.nil?部分并转到每个数组的值是什么，然后将它们与所有内容一起发布出来- value.each do |msg|。

现在，如果您希望它出现在顶部中心（就像我目前所做的那样），您需要将其添加到 bootstrap-notify 的 CSS 文件中：.notifications.top-center{top:40px;left:0;width:100%;}.notifications.top-center>div{margin:5px auto;width:20%;text-align:center;}

之后，它应该像我上面想要的那样工作！