我希望我的列在中型和较大屏幕尺寸 (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 类上?
最佳答案
是的,您可以通过列出窗口 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 修复。
关于css - Angularjs 使用 ng-if 根据屏幕尺寸调用 clearfixes,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36672283/