twitter-bootstrap Bootstrap 警报重叠
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/17029795/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap alerts overlapping
提问by jnar
I have modified the bootstrap alerts so they show on the top of the content without moving down any other div, but the issue i have is that the application can show at the same time warnings, errors or success messages but they are overlapping each other.
我修改了引导程序警报,因此它们显示在内容的顶部,而不会向下移动任何其他 div,但我遇到的问题是应用程序可以同时显示警告、错误或成功消息,但它们相互重叠。
Here is my alert's css:
这是我的警报的 css:
.alert {
position: absolute;
z-index: 999999;
width: 800px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
padding: 8px 35px 8px 14px;
margin-bottom: 20px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
background-color: #fcf8e3;
border: 1px solid #fbeed5;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
Edit:Here is the Example in jsfiddle
编辑:这是jsfiddle 中的示例
Edit 2:Thanks to Praveen, here is the code that suits my app: Final code on jsfiddle
编辑 2:感谢 Praveen,这是适合我的应用程序的代码:jsfiddle 上的最终代码
回答by Praveen Kumar Purushothaman
Since the position is absolute, you are facing this problem. Make them relativethis way:
由于位置是absolute,您正面临这个问题。让他们relative这样:
.alert {
position: relative;

