Bootstrap-Karte in der mobilen Ansicht nicht zusammengebrochen

Question

Ich stehe vor einer Herausforderung in Bezug auf Bootstrap-Karte mit Bootstrap Version 3.

Voraussetzung ist, dass Karten (Rendering-Liste der Karten in ng-repeat) in der mobilen Ansicht ausgeblendet werden, nur deren Header sollte sichtbar sein.

Während die Karte erfasst ist, sollte sie in der rechten Ecke des Kartenkopfs Chevron-Down anzeigen und auf Chevron klicken - die Karte sollte sich ausdehnen und umgekehrt.

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

ich die gleiche Sache gegenüber. versuchen, ein div auf weniger als 992px zu reduzieren. vorerst, ich habe einfach div für alle Pixel dann kollabiert mit Media-Abfrage für 992px und 1200px, rief ich ID Kollaps-Klasse, um display: block ;.

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> 

als Neuling, ich verbrachte Stunden im Internet besser Weg zu finden, aber kein Glück wahrscheinlich habe ich schlechte Suchbegriffe.

Wenn jemand eine bessere Lösung (ohne Java) finden kann, wäre es großartig.