css - 根据条件更改 bootstrap col-width

Question

这是我的简单 Bootstrap 代码..

<div class="container">
<div class="col-lg-12">

  <div class="col-lg-3">
    <p>
    aaaaaa
    </p>
  </div>
  <div class="col-lg-3">
    <p>
    bbbbb
    </p>
  </div>
  <div class="col-lg-3" ng-show="myVar">
    <p>
    cccccc
    </p>
  </div>
   <div class="col-lg-3">
    <p>
    bbbbb
    </p>
  </div>
</div>
</div>

这里我连续放置了 4 个盒子。 我已经初始化了一个名为 myvar 的变量。基于 myVar 变量，一些框可能会隐藏。

所以当一个盒子被隐藏时，其他盒子的宽度应该被管理，即宽度应该增加。不应有多余的空间。

如果宽度是 col-lg-3 意味着当一个框被隐藏时它应该被更改为 col-lg-4。

fiddle :https://jsfiddle.net/euxcj3qb/14/

如何做到这一点？谁能给我一些建议？

Answer 1

这样使用

<div class="container" ng-app="myApp">
<div class="col-lg-12" ng-controller="myController">

  <div class="col-xs-12 col-sm-6 col-md-4"  ng-class="{' col-lg-3': myVar, ' col-lg-4': !myVar}">
    <p>
    aaaaaa
    </p>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4"  ng-class="{' col-lg-3': myVar, 'col-lg-4': !myVar}">
    <p>
    bbbbb
    </p>
  </div>
  <div class="" ng-show="myVar" ng-class="{' col-lg-3': myVar}">
    <p>
    cccccc
    </p>
  </div>
   <div class="col-xs-12 col-sm-6 col-md-4 "  ng-class="{'col-lg-3': myVar, ' col-lg-4': !myVar}">
    <p>
    bbbbb
    </p>
  </div>
</div>
</div>

已更新 fiddle