モバイルビューでブートストラップカードが折りたたまれていない

Question

ブートストラップバージョン3を使用しているときに、ブートストラップカードに関する1つの課題に直面しています。

要件、カード（ng-repeatのカードのレンダリングリスト）はモバイルビューで折りたたむ必要があります。ヘッダーのみを表示する必要があります。

カードがコプレーションされている間は、カードヘッダーの右隅に山形が表示され、山形のカードをクリックするとそのカードが拡大するはずです。

HTML -

<div class ="card spa-card" ng-hide="options.is_hide"> 
    <div class="row row-eq-height card-header spa-card-header"> 
     <div class="col-xs-6 text-right"> 
      <a class="visible-xs" data-toggle="collapse" href="#{{options.sys_id}}" 
      aria-expanded="false" aria-controls="{{options.sys_id}}"> 
      <i class="fa fa-chevron-down fa-2x dark"></i> 
      <i class="fa fa-chevron-up fa-2x dark"></i> 
      </a> 
     </div> 
     </div> 
     <div id="{{options.sys_id}}" class=" card-body" > 
     <div class="col-xs-12 card-name">{{options.user_name}}</div> 
     </div>   
     <div class ="row row-eq-height card-date-label"> 
     <label class ="col-xs-2"></label> 
     <label class ="col-xs-4">From</label> 
     <label class ="col-xs-2"></label> 
     <label class ="col-xs-4">To</label> 
     </div>   
     <div class ="row row-eq-height "> 
     <label class ="col-xs-6 card-date-values" >{{options.start_date}}</label> 
     <label class ="col-xs-6 card-date-values" >{{options.end_date}}</label> 
     </div> 

    </div> 
    </div> 

CSS -

a[aria-expanded=true] .fa-chevron-down 
{ 
    display: none; 
} 
a[aria-expanded=false] .fa-chevron-up 
{ 
    display: none; 
} 
#{{options.sys_id}}.collapse in 
#{{options.sys_id}}.collapsing { 
    display:block!important; 
} 

Answer 1

私は同じことに直面していました。 992px未満でdivを折りたたみようとしています。 当分の間、私は単純にすべてのピクセルのdivを折りたたんで、992pxと1200pxのメディアクエリを使って、私はdisplay：block;を作るためにIDの折りたたみクラスを呼び出しました。

CSS：

@media (min-width: 992px) { 
    #t10.collapse {display: block;} 
} 

HTML：

<div class="card"> 
<div class="card-header"> 
    <a data-toggle="collapse" data-target="#t10">Some text</a> 
</div> 

<div class="card-body collapse" id="t10"> 
    <div class="row"> 
     <div class="col-md-12 mb-2"> 
      Some more text 
     </div> 
    </div> 
</div> 
</div> 

は初心者として、私はより良い方法を見つけるためにインターネット上で時間を過ごしたが、運はおそらく私が悪いの検索用語を使用していません。

誰かが（Javaなしで）より良いソリューションを見つけるのを助けることができれば、それはすばらしいでしょう。