如何在缩小的同时修复角度格栅项目的重叠

Question

我正在使用angularjs 1.5.8并试图像这样实现角度网格布局

并且在移动模式中元素堆叠在彼此之下。我的网格选项如下

 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/，并尝试在 3上方移动 2（SMALL TILE）（LARGE TILE）。这个小提琴使用min-height CSS规则。

此处https://jsfiddle.net/cerwwxd8/10/所有min-height CSS规则都替换为height CSS规则，此处移动 2（SMALL TILE） 3（LARGE） TILE）不会产生重叠。

BTW：这个小提琴中的索引打印有attr() CSS函数，该函数从内容 CSS规则中的 tabindex HTML属性中获取此值：

.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)'
}