如何减少 GridStack 网格元素的最小高度和重量？

Posted 2023-02-19

【中文标题】如何减少 GridStack 网格元素的最小高度和重量？

【英文标题】：How to decrease minimal height and weight of a GridStack grid element?

【发布时间】：2021-09-21 10:05:16

【问题描述】：

我正在使用 GridStack.js 库，我必须使用它来实现键盘。问题是，如果我使屏幕宽度（在 Chrome DevTools 中）小于 800-1000 像素，那么所有网格元素的宽度都会更改为 100%（尽管以前不是这样）。示例在这里https://gridstackjs.com/#demo 所以我猜这个库中有某些最小高度元素。或者整个 .grid-stack 元素具有最小宽度，如果宽度小于最小宽度，则所有 .grid-stack-items 都获得宽度：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 元素的最小高度和宽度，以保持它们适应屏幕宽度。

【参考方案1】：

初始化时：

const grid = GridStack.init(options);

您需要将这些添加到选项中：

const options = 
        cellHeight: 50,
        cellWidth: 50,
        disableOneColumnMode: true
      ;