Html 引导-自定义闪存/警报框

我有一个

Rails

应用程序，我在其中使用

Boosttrap

和

HAML

，当我呈现flash消息时，我想稍微改变一下它们的外观。我希望它们是全屏的，每边都有

cold-md-1

边距，并且

col-md-10

包含闪光信息

我试过的是：

- if flash[:notice]

  / Full width is a css class with 100% width, so the width works...
  .alert.alert-info.alert-dismissable.full-width
    .col-md-1
    %button{:type => "button", :class => "close", 'data-dismiss' => "alert", 'aria-   hidden' => "true"} ×
    = flash[:notice]
    .col-md-1

这不是我想要的（不是正确的边距）。我也尝试过像这样包含flash消息：

.col-md-1
.col-md-10
  [message]
.col-md-1

然后它看起来还可以，但是关闭按钮没有按我所希望的那样工作（它没有关闭整个消息）。要说明我要实现的目标，请参见下图：

这里我希望关闭按钮（注意：仅关闭按钮，而不是背景）与

帐户

下拉列表和灰色框对齐

---

我该怎么做有什么想法吗

你让简单的事情看起来很复杂。您希望每侧都有col-md-1边距，这样您的警报宽度将为col-md-10，并且bootstrap3有用于抵消边距的类。

- if flash[:notice]
  .alert.alert-info.alert-dismissable.col-md-10.col-md-offset-1
    .col-md-1
    // give proper width and margin to this div to align button with dropdown
      %button{:type => "button", :class => "close", 'data-dismiss' => "alert", 'aria-   hidden' => "true"} ×
    = flash[:notice]

---

通过使用一些javascript（或咖啡脚本）解决了这个问题。视图：

JavaScript（或咖啡脚本）：

---

谢谢我试过了，但没有达到我想要的效果。通知框不再全屏显示。我只希望消息的内容（上例中的

x

按钮）与我页面的其他内容对齐，不是蓝色背景色。@Anders您的问题是

我希望它们是全屏的，每边都有col-md-1边距
如果每边都有col-md-1边距，那么您只剩下col-md-10:）。你能解释一下哪个是你的通知栏，哪个是你想要对齐的x按钮吗？我现在更新了我的问题。希望更清楚。@Anders帐户下拉列表的宽度是多少？只需在按钮外使用一个容器将其与下拉菜单对齐即可。我已经尝试过了，但并没有让它完美地工作。由于我在那里也使用了Bootstrap，宽度/x对齐也发生了变化，结构相同，
col-md-1
col-md-10
[内容，如帐户按钮]
col-md-1
。因此，左右大小/边距会根据分辨率的不同而变化。我希望flash消息的表现方式与此相同。。。
.alert.alert-info.alert-dismissable.no-border-radius
  .container
    .col-md-1
    .col-md-10
      = flash[:notice]
      %button{:type => "button", :class => "close", 'data-dismiss' => "alert", 'aria-hidden' => "true"} ×
    .col-md-1

$('.close').click ->
  $(".alert").hide();