引导卡未在移动视图中折叠答案

【问题标题】：bootstrap card not collapsed in mobile view引导卡未在移动视图中折叠
【发布时间】：2018-05-13 15:36:54
【问题描述】：

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

要求是，卡片（在 ng-repeat 中渲染卡片列表）应该在移动视图中折叠，只有它的标题应该是可见的。

当卡片被折叠时，它应该在卡片标题的右上角显示 chevron-down，点击 chevron-down 卡片应该展开，反之亦然。

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;
}

【问题讨论】：

标签： javascript css angularjs twitter-bootstrap

【解决方案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），那就太好了。

【讨论】：