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]

Answer 2

通过使用一些javascript（或咖啡脚本）来解决它。查看：

.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

JavaScript（或Cof​​feeScript）：

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