ブートストラップを作る方法3画面の上部から中央に向かって警告フライを行う

Question

ブートストラップ3アラートボックスの高さと高さを検索しています。要素。

私はたくさんのことを発見しています。どのように私はアラートボックスのこの動作を達成するのですか？

Answer 1

このanswerをchipChocolate.pyで、そして彼がhereを提供してくれました。 divが下から上に移動しているので、あなたが探しているのは正確ではありませんが、アイデアは同じです。 3つのdivを作成します。メインコンテナ、アラートコンテナ、アラートコンテンツ

<div class="main-container"> 
    <div class="alert-container"> 
    <!-- placeholder image --> 
    <img class="inner_img" src="http://placehold.it/1000x1000" /> 
    <div class="alert-content"> 
     <div class="alert alert-danger"> 
     <strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action. 
     </div> 
    </div> 
    </div> 
</div> 

は、その後、私はブートストラップ・アラートでフィドルhereを行っているこのCSS

.main-container{ 
position: relative; /* Set to absolute */ 
} 
.alert-container { 
position: absolute; /* Set to absolute and positioned at top corner*/ 
top: 0; 
left: 0; 
} 
.alert-content { 
position: absolute; /* This moves it to the bottom (initial state) */ 
bottom: 90%; 
width: 100%; 
height: 10%; 
transition: bottom 1s; 
} 
.main-container:hover .alert-content { 
    bottom: 50%; /* This moves it to the middle (only on hover) */ 
} 

を適用し、ページの上から中央に移行しました。それに応じて調整することができます。