Bootstrap-3：警报而不替换现有内容

Question

图像＃1：带 .in类的引导警报：

图像＃2：没有 .in类的引导警报（隐藏下面的内容）：

自从过去三个小时以来，我一直在努力让警报完美运行 - 而不会取代其他内容。我已经阅读了一些博客文章和SO Q＆amp; A但未能达到预期的效果。

尝试：

• 结束（不允许的提醒） - 或 - 淡出使display: none;有效取代内容。
• 不淡出但删除.in类会使元素隐藏但仍然与其他元素重叠（参见下面的图像＃2和HTML）
• 我尝试过使用Z-Index来解决这个问题但是没有用。
• 我会尝试接下来尝试弹出警报，除非我能通过SO找到更好的解决方案。

HTML：

<div class="alert alert-message alert-info fade"><p> Joined: StaticRoom </p></div>

JavaScript的：

function status(type, msg) {
    var alertHTML = "<div class='alert alert-message alert-" + type + " fade'><p> " + msg + " </p></div>";

    $("#roomInfo").html(alertHTML);
    $(".alert-message").addClass("in");

    setTimeout(function () {
      $(".alert-message").removeClass("in");
    }, 3000);  
}

图片＃3：渴望：

1. 警报到期后没有重叠
2. 在过期时不应取代现有内容：



帮助！

Answer 1

这是由提醒自我height，padding和margin引起的。 .fade类仅更改opacity值，不再：

摘自bootstrap.css

.fade{
    opacity:0;
    -webkit-transition:opacity .15s linear;
    transition:opacity .15s linear
}
.fade.in{
    opacity:1
}

你可以做的是用：

覆盖Bootstrap CSS

.fade {
    height: 0;
    padding: 0;
    margin: 0;
    -webkit-transition:height .15s linear;
    transition:height .15s linear;
}
.fade.in {
    height: auto;
    padding: 15px;
    margin-bottom: 20px;
}

Here is a working JSFiddle to show you the result.

修改
Updated fiddle to show you how to position your elements

编辑2
我没有得到你想要的绝对定位警报。因此，您不需要任何其他类，只需简单：

.movie {
    position: relative;
    width: 430px;
    margin: 20px auto;
    padding: 5px;
    padding-bottom: 40px; /* give extra space for form */
}
.movie form {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 5px;
}
.movie .alert {
    position: absolute;
    bottom: 30px; left: 5px; right: 5px;
}

Updated fiddle for absolute positionning