ブートストラップのアラートデータの消滅が機能しない

Question

<div class="alert alert-info alert-dismissible fade show"> 
    <button class="close" data-dismiss="alert" aria-label="Close">x</button> 
    Signed out successfully. 
</div> 

ブートストラップ警告を上記のhtmlで閉じることができません。ブートストラップのドキュメントに従ってすべてが正しいように見えます。私はレールアプリでこれを使用しています。

私が間違っていることを見ることができますか？ HTMLに何も問題がなければ、アイデアを提供できますか？私はRails 5とTurbolinks 4を使用しています。ブートストラップJSとCSSの両方が正しくロードされていると言えます。

Answer 1

HTML mark-upに何か問題はありません。

私は1つの考えで私を残します、私はあなたがfade showイベントで何か間違っていると思います。アラートクローズイベントの経路に入っているイベントで何かをしているかどうかを確認してください。

あなたのjavascriptを投稿すると、この唯一の答えが完了することができます。

Answer 2

fadeとinクラスの両方をアラートに追加する必要があります。閉じたときにアラートを持っている

は、アニメーションを使用し、彼らはすでにそれらに適用される .fadeと.inクラスを持っていることを確認してください。

ドキュメントからAlert.js Usageを参照してください。

これが適用されていCSS：

.fade.in { 
    opacity: 1 
} 

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

実施例：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="alert alert-info alert-dismissible fade in" role="alert"> 
 
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span> 
 
    </button> 
 
    Signed out successfully 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>