html - Bootstrap - 自定义闪光灯/警报框

Question

我有一个 Rails 应用程序，我在其中使用了 Boosttrap 和 HAML，当我显示 flash 消息时，我想更改它们的外观轻微地。我希望它们全屏显示，每边都有 cold-md-1 边距，col-md-10 包含 flash 消息。

我试过的是:

- 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

然后它看起来没问题，但是关闭按钮没有按我想要的那样工作(它没有关闭整个消息)。为了说明我要实现的目标，请参见下图:

这里我想让关闭按钮(注意只有关闭按钮，而不是背景)与account下拉列表和灰色框对齐。

关于我应该做什么的任何想法？

Answer 1

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

- 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]