Question

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

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

当卡片被收集时，它应该在卡片标题的右下角显示V形符号并且点击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;
}

Answer 1

我面对同样的事情。试图在不到992像素的情况下折叠div。暂时，我只是为所有像素折叠了div，然后使用992px和1200px的媒体查询，我调用ID的折叠类来进行显示：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），那就太棒了。

移动视图中没有折叠自举卡

1 个答案: