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

https://stackoverflow.com/questions/68343982/