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

发布时间：2020-12-17 07:26:11 所属栏目：安全来源：网络整理

导读：我正在使用 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 },]; $sco

我正在使用 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)'
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!