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

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/，并尝试将2 (SMALL TILE)移至3 (LARGE TILE)上方。这个小提琴使用min-heightCSS 规则。

这里https://jsfiddle.net/cerwwxd8/10/所有min-heightCSS规则都替换为heightCSS规则，并且这里将2（小瓷砖）移动到3（大瓷砖）上方不会产生重叠。

顺便说一句：这个小提琴中的索引是用 CSS 函数打印的，该函数从内容CSS 规则中的tabindex HTML 属性中attr()获取该值：

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