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