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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 17:19:09  来源:igfitidea点击:

Bootstrap alerts overlapping

csstwitter-bootstrap

提问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;

Fiddle: http://jsfiddle.net/praveenscience/Q6nA9/2/

小提琴:http: //jsfiddle.net/praveenscience/Q6nA9/2/