我有一个 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
下拉列表和灰色框对齐。
关于我应该做什么的任何想法?
最佳答案
你让简单的事情看起来很复杂。 您希望每边都有 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]
关于html - Bootstrap - 自定义闪光灯/警报框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24960094/