使用AngularJS动态更改Bootstrap 3列宽？答案

【问题标题】：Change Bootstrap 3 column widths dynamically with AngularJS?使用AngularJS动态更改Bootstrap 3列宽？
【发布时间】：2014-03-19 14:37:50
【问题描述】：

如何使用 AngularJS 切换 Bootstrap 3 网格系统列宽 (col-*)？我正在尝试使用 ng-class，如下所示，但它不起作用。任何帮助将不胜感激。

这是我认为的网格结构：

<div class="row">
  <div ng-class="{{columnWidth}}"></div>
  <div ng-class="{{columnWidth}}"></div>
  <div ng-class="{{columnWidth}}"></div>
</div>

这是我控制器中的变量：

$scope.columnWidth = "col-md-3"; //Toggle between "col-md-3" and "col-md-4"

无论我设置什么范围变量，这些列都像在移动设备上一样堆叠。

【问题讨论】：

【解决方案1】：

应该是这样的，

  <div ng-class="columnWidth"></div>

【讨论】：