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

【问题标题】：Bootstrap - custom flash/alert boxesBootstrap - 自定义闪光灯/警报框
【发布时间】：2014-07-25 16:13:48
【问题描述】：

我有一个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"} &times;
    = flash[:notice]
    .col-md-1

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

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

然后看起来没问题，但是关闭按钮无法按我的意愿工作（它不会关闭整个消息）。为了说明我要实现的目标，请参见下图：

这里我希望关闭按钮（注意：只有关闭按钮，而不是背景）与account 下拉菜单和灰色框对齐。

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

【问题讨论】：

标签： html css ruby-on-rails twitter-bootstrap ruby-on-rails-4

【解决方案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"} &times;
    = flash[:notice]

【讨论】：

谢谢！我试过了，但它并没有达到我想要的效果。通知框不再是全屏的。我只希望消息的内容（上例中的 x 按钮）与我页面的其他内容对齐，而不是蓝色背景颜色。
@Anders 你的问题说I want them to be full screen with cold-md-1 margins on each side 如果每边都有 col-md-1 边距，那么你将只剩下 col-md-10 :)。你能解释一下哪个是你的通知 div 以及你想与哪个对齐你的 x 按钮
我现在更新了我的问题。希望它更清楚。
@Anders 帐户下拉菜单的宽度是多少？只需使用按钮外的容器将其与下拉菜单对齐
我已经尝试过了，但没有让它完美地工作。宽度/x 对齐方式发生了变化，因为我在那里也使用了 Bootstrap，同样的结构，col-md-1col-md-10[content, like the account button]col-md-1。所以左右大小/边距会根据分辨率而变化。我希望 Flash 消息的行为方式相同......

【解决方案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"} &times;
    .col-md-1

JavaScript（或 CoffeeScript）：

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

【讨论】：