如何在缩小时修复 angular-gridster 项目的重叠

Question

我正在使用 angularjs 1.5.8 并尝试实现这样的 angular gridster 布局

并且在移动模式下元素堆叠在彼此之下。我的gridster-options如下

 this.standardItems = [
        { sizeX: 2, sizeY: 1, row: 0, col: 0 },  
        { sizeX: 2, sizeY: 1, row: 1, col: 0 },
        { sizeX: 4, sizeY: 2, row: 0, col: 2 },
        { sizeX: 2, sizeY: 1, row: 2, col: 0 },
        { sizeX: 2, sizeY: 1, row: 2, col: 2 },
        { sizeX: 2, sizeY: 1, row: 2, col: 4 },
    ];

    $scope.gridsterOpts2 = {
        margins: [20, 20],
        outerMargin: false,
        swapping: false,
        pushing: false,
        rowHeight: 'match',
        mobileBreakPoint: 600,
        margins: [10, 10],
        floating: false,
        isMobile: true,
        draggable: {
            enabled: false
        },
        resizable: {
            enabled: false,
            handles: ['n', 'e', 's', 'w', 'se', 'sw']
        }
    };

我也用过下面的样式

.smalltiles{
  min-height: 30%;
}

.largetile{
  min-height: 60%;
}

.gridster .gridster-item {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  color: #004756;
  background: #ffffff;
  padding-top: 5px;
  padding-bottom: 0px;
  background: blue;
  font-size: 50px;
  color:white;
}
.gridster{
  min-height:100%;
}
.gridster-item{
  margin-bottom: 10px;
}

当网格在桌面屏幕上缩小时看起来很好，或者在全屏下网格重叠并且彼此下方的元素开始像这样重叠。

我该如何处理。是不是我排版错了先谢谢了。

注意：如果给出一个使用 bootstrap css 类的例子会更好

Answer 1

终于成功地通过将 ng-class="{smalltiles:item.sizeY<2,largetile:item.sizeY>1}" 添加到 gridster 项目来复制您的问题，请参阅 https://jsfiddle.net/cerwwxd8/9/，并尝试将 2 (SMALL TILE) 移动到 3（大瓷砖）。此 fiddle 使用 min-height CSS 规则。

这里 https://jsfiddle.net/cerwwxd8/10/ 所有 min-height CSS 规则都替换为 height CSS 规则，这里移动 2 (SMALL TILE ) 以上 3 (LARGE TILE) 不会产生重叠。

顺便说一句：此 fiddle 中的索引使用 attr() CSS 函数打印，该函数从 tabindex HTML 属性内容 CSS 规则：

.smalltiles{
  text-align: center;
  height: 30%;
}
.smalltiles:after {
  font-size: 0.5em;
  content: attr(tabindex) ' (SMALL TILE)';
}

.largetile{
  text-align: center;
  height: 60%;
}
.largetile:after {
  font-size: 0.7em;
  content: attr(tabindex) ' (LARGE TILE)'
}

如何在缩小时修复 angular-gridster 项目的重叠

how to fix overlapping of angular-gridster items while shrinking

angularjs

gridster