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

this.standardItems = [
        { sizeX: 2,sizeY: 1,row: 0,col: 0 },{ sizeX: 2,row: 1,{ sizeX: 4,sizeY: 2,col: 2 },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.3);
  -moz-Box-shadow: 0 0 5px rgba(0,0.3);
  Box-shadow: 0 0 5px rgba(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类的示例会更好