angularjs - 使用 AngularJS 动态更改 Bootstrap 3 列宽？

Question

如何使用 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>

这是我 Controller 中的变量:

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

不管我设置的范围变量是什么，这些列就像我在移动设备上一样堆叠。

Answer 1

应该是这样的，

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