css - Angularjs 使用 ng-if 根据屏幕尺寸调用 clearfixes

Question

我希望我的列在中型和较大屏幕尺寸 (col-md-4) 上每行显示 3 列，在较小屏幕尺寸上每行显示 2 列，在超小尺寸屏幕上每行显示 1 列 (col-sm- 6)，但是当我在我的平板电脑上查看我的应用程序时，我在 2 列行中得到了 float 列。我知道可以使用带有 ng-if 的 clearfix 类来告诉它每隔这么多行创建一列，但是如果我使用:

<div class='clearfix' ng-if='$index % 2 == 0'>

它会让我的列每 2 列创建一个新行，即使在更大的屏幕上也是如此，这不是我想要的。是否可以使 ng-if 仅在 col-sm 类的 2 列之后严格添加 clearfix，而不是在 col-md 类上？

Answer 1

是的，您可以通过列出窗口 resize 事件来实现，根据屏幕内部宽度，您可以使用 将 div.clearfix 附加或分离到 dom >ng-if.

例如:

Controller :

维护一个变量来表示窗口宽度$scope.windowWidth

app.controller('MainCtrl', function($scope, $window, $timeout) {
  $scope.windowWidth = $window.innerWidth;

  $window.onresize = function(event) {
    $timeout(function() {
      $scope.windowWidth = $window.innerWidth;
    });
  };
});

查看:

附加 div IF windowWidth <= 768 ELSE 从 DOM 中移除 div。

<div class="tab-only clearfix" ng-if="windowWidth <= 768">
  This will show only on min-width : 768px
</div>

这是一个DEMO

请搜索是否有针对此的任何 css 修复。