angularjs – 如何在收缩的同时修复角格子项目的重叠

前端之家收集整理的这篇文章主要介绍了angularjs – 如何在收缩的同时修复角格子项目的重叠前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用 angularjs 1.5.8并试图实现像这样的角度网格布局

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

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类的示例会更好

最终成功通过将ng-class =“{tinytiles:item.sizeY< 2,largetile:item.sizeY> 1}”添加到gridster项目来复制您的问题,请参阅 https://jsfiddle.net/cerwwxd8/9/,并尝试将2(SMALL TILE)移到3以上(大瓷砖).这个小提琴使用最小高度CSS规则.

这里https://jsfiddle.net/cerwwxd8/10/所有min-height CSS规则都被高度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)'
}

猜你在找的Angularjs相关文章