ブートストラップ折りたたみ - アニメーションなし

Question

私はFont Awesomeライブラリからアイコンをクリックして、私のウェブサイトにBootstrap Collapseを実装しています。私はそれを押すと、コンテンツが崩壊しますが、アニメーションはありません。ポップアップします。私は間違って何をしていますか？

は、ここであなたが原因ブートストラップのグリッドシステムのあなたの不適切な実装に紛争に実行しているmy code

<div class="container col-sm-12 banner"> 
    <i class="fa fa-plus" aria-hidden="true" data-toggle="collapse" data-target="#moreInfo"></i> 
</div> 
<div id="moreInfo" class="collapse"> 
    <div class="hiddenInfo"> 
       123 
    </div> 
</div> 

Answer 1

です。 .containerと.col-sm-12はこのように組み合わせることはできません。トランジションエフェクトと競合する一連の浮動エラーが発生します。

ブートストラップのグリッドを正しく実装したら（別のfloatでクリアな問題に対処すると）、トランジションは期待どおりにアニメートされます。

.banner { 
 
    background-color: #1194f0; 
 
    padding: 20px; 
 
} 
 

 
.banner i { 
 
    font-size: 40px; 
 
    float: right; 
 
    line-height: 50px; 
 
} 
 

 
.hiddenInfo { 
 
    background-color: black; 
 
    color: white; 
 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet"> 
 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-12"> 
 
     <div class="banner clearfix"> 
 
     <i class="fa fa-plus" aria-hidden="true" data-toggle="collapse" data-target="#moreInfo"></i> 
 
     </div> 
 
    </div> 
 
    
 
    <div class="col-sm-12"> 
 
     <div id="moreInfo" class="collapse"> 
 
     <div class="hiddenInfo"> 
 
      123 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>