我正在使用 GridStack.js 库,我必须使用它来实现键盘。问题是,如果我将屏幕宽度(在 Chrome DevTools 中)设置为小于 800-1000px,那么所有网格元素的宽度都会更改为 100%(尽管之前不是这样)。例子在这里https://gridstackjs.com/#demo所以我猜这个库中有某些最小高度元素。或者整个 .grid-stack 元素具有最小宽度,如果宽度小于最小宽度,则所有 .grid-stack-items 都将获得 width: 100%。所以问题是如何解决这个问题并设置我自己的最小高度。我可以使用此代码更改宽度:
.grid-stack>.grid-stack-item {
$gridstack-columns: 12; // here I can set columns number
min-width: (100% / $gridstack-columns);
@for $i from 1 through $gridstack-columns {
&[gs-w='#{$i}'] {
width: (100% / $gridstack-columns) * $i;
}
&[gs-x='#{$i}'] {
left: (100% / $gridstack-columns) * $i;
}
&[gs-min-w='#{$i}'] {
min-width: (100% / $gridstack-columns) * $i;
}
&[gs-max-w='#{$i}'] {
max-width: (100% / $gridstack-columns) * $i;
}
}
}
但即使我更改列号并且我的元素的宽度变小,高度仍然与以前相同。
如果我的配置是这样的:
grid.load([{ "w": 1, "h": 1 }]);
...我有 12 列,那么这个元素是方形的。但是,如果我将列数更改为 24,则该元素将变为一个矩形(尽管配置中的宽度和高度相等)。我希望单元格的高度和宽度始终相等。
请提供一种更好的方法来设置 GridStack 元素的最小高度和宽度以使其适应屏幕宽度。
最佳答案
初始化时:
const grid = GridStack.init(options);
您需要将这些添加到选项中:
const options = {
cellHeight: 50,
cellWidth: 50,
disableOneColumnMode: true
};
关于javascript - 如何减少 GridStack 网格元素的最小高度和重量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68343982/