如何根据事件动态更改引导列？答案

【问题标题】：How to change bootstrap columns dynamically based on event?如何根据事件动态更改引导列？
【发布时间】：2016-10-25 18:36:21
【问题描述】：

我正在使用 angular-ui 折叠来隐藏和显示 2 列，因此当用户单击 glyphicon 时，它将隐藏/显示列，现在当当时隐藏两列时，我希望 10 列成为 12 列。有没有可能完成这个任务？

main.html

<span class="glyphicon glyphicon-th-list" class="btn btn-default" ng-click="isCollapsed = !isCollapsed" id="treelist"></span>
<div class="row">
  <div class="col-md-2" uib-collapse="isCollapsed">
      <p>test</p>
      <p>test</p>
  </div>
  <div class="col-md-10">
    contains some data here ...
  </div>
</div>

【问题讨论】：

标签： html css angularjs twitter-bootstrap

【解决方案1】：

您应该可以使用ng-class 在类之间切换。

<div ng-class="{'col-md-12':isCollapsed,'col-md-10':!isCollapsed}">
    contains some data here ...
</div>

【讨论】：

完美的老板就是我想要的。谢谢

【解决方案2】：

我在 Angular 中使用这种方式

<div [ngClass]="{'col-md-12':!advancedSearch,'col-md-10':advancedSearch}"></div>

【讨论】：