Bootstrap-3：在不替换现有内容的情况下发出警报。

Question

图片1: Bootstrap Alert 与 .类中。

图片#2：Bootstrap警报 橆 .在类中（将内容隐藏在下面）。

在过去的三个小时里，我一直在尝试让警报完美地工作 -- -- 而不取代其他内容。我阅读了一些博客帖子和SO Q&A，但无法达到预期效果。

尝试。

• 关闭(Dismissable Alerts)--或者淡出使得 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
}

你可以做的是用.NET来覆盖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;
}

**编辑 **我不明白你想要的是一个绝对位置的警报。所以，你不需要任何额外的类，只需要一个简单的.NET类。

.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;
}