application_helper.rb

Question

我正在尝试在我的rails / bootstrap中获取闪光警报，以显示一直向右拉的关闭图标。我正在使用'close'和'pull-right'css类，但是close图标不会一直向右移动。

在图片中，黑条是导航栏，粉红色条是闪光警报。图像的右端是页面的右端。我希望消息右端附近的x关闭按钮（用手绘箭头指向）更接近右端。它确实通过使用'close'类来正确设置样式并向右推，但不是一直都是。添加pull-right类似乎没有任何影响。

如何让关闭按钮一直向右移动，理想情况下与导航栏中登录链接的右端齐平？

更新：以下是生成Flash消息的代码 - 请注意按钮上的类是“关闭”。添加'pull-right'对它没有任何影响。

application_helper.rb

def bootstrap_class_for flash_type
  { success: "alert-success", error: "alert-danger", alert: "alert-danger", notice: "alert-info" }[flash_type.to_sym] || flash_type.to_s
end

def flash_messages(opts = {})
  flash.each do |msg_type, message|
  concat(content_tag(:div, message, class: "alert #{bootstrap_class_for(msg_type)} fade in") do 
  concat message
  concat content_tag(:button, raw("&times;"),class: "close", data: { dismiss: 'alert' })
        end)
  end
  nil
end

# application.html.erb

<body>
  <%= render 'layouts/navbar' %>
  <div id="main-container" class="container-fluid">
    <%= flash_messages %>
    ...
  </div>
  ...
</body>

# application.css.scss
.container-fluid {
  padding-left: 0px;
  padding-right: 0px;
}

更新2：由于上面代码中的样式删除了15px填充，因此关闭图标对齐变坏。如果我删除那个容器流体样式，并留下15px填充，我会在边缘上得到这个空白，这可能更糟糕（见下图）。

更新3：当我将容器流体填充归零时，导航栏也会在左边缘上被压扁，即使导航栏在 上面呈现 > 容器 - 流体div。我不明白为什么会这样。

Answer 1

.alert.fade.in{
    margin-left: -15px;
    margin-right: -15px;
}

或者，您可以将row类添加到警报容器中，例如。

def flash_messages(opts = {})
  flash.each do |msg_type, message|
  concat(content_tag(:div, message, class: "alert #{bootstrap_class_for(msg_type)} fade in row") do 
  concat message
  concat content_tag(:button, raw("&times;"),class: "close", data: { dismiss: 'alert' })
        end)
  end
  nil
end

闪光警报关闭图标不会一直浮动到正确的bootstrap / rails

application_helper.rb

1 个答案: