引導-3：警報而不替換現有的內容

Question

圖像＃1：自舉警報與。在類：

圖片＃2：自舉警報而不。在類（隱藏內容下面）：

我一直以來的近三年時間試圖獲得警報完美的工作 - 無線不會取代其他內容。我已閱讀了幾篇博客文章，但無法達到預期的效果。

嘗試：

• 結算（Dismissable警告） - 或 - 淡出使得其有效地置換內容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 
} 

你可以做的是重寫引導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

EDIT 2
我沒有得到你想要的絕對positionned警報。所以，你不需要任何額外的課程，只是一個簡單的：

.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