javascript - Bootstrap 卡在移动 View 中未折叠

Question

我在使用 bootstrap 版本 3 时面临一个关于 bootstrap 卡的挑战。

要求是，卡片(在 ng-repeat 中呈现卡片列表)应该在移动 View 中折叠，只有它的标题应该是可见的。

当卡片折叠时，它应该在卡片标题的右 Angular 显示向下的人字形，点击向下的人字形卡片应该展开，反之亦然。

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 的媒体查询，我调用了 ID 的折叠类来制作 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>

作为新手，我花了几个小时在互联网上寻找更好的方法，但运气不好，可能是我使用了错误的搜索词。

如果有人能帮助找到更好的解决方案(没有 java)，那就太好了。