Css 未设置网格堆栈边距宽度--项目在每行上相互接触

我是第一次使用gridstack，但水平边距有问题。很明显，我的css中有些东西使我的项目太宽了

我在演示中看到gridstack.css的左、右各设置为10px，我使用的是相同的默认css

我已将gridstack设置为使用6列，如下所示：

<div id="container" class="grid-stack grid-stack-6"> 
  <div class="grid-stack-item"
    data-gs-x="0" data-gs-y="0"
    data-gs-width="3" data-gs-height="2">
        <div class="grid-stack-item-content">
        <i class="icon-lock-open pinDiv warning"></i>
        <i class="icon-cancel-circled"></i>
        PRE MAP
  </div>
 <div class="grid-stack-item lockAspect"
    data-gs-x="3" data-gs-y="0"
    data-gs-width="3" data-gs-height="2">
        <div class="grid-stack-item-content" style="background:pink;">
        <i class="icon-lock pinDiv warning"></i>
        <i class="icon-cancel-circled"></i>
        POST MAP
        </div>
  </div>
</div>

我包括gridstack extra和gridstack.css

为什么我的项目根本没有水平边距

---

非常感谢

我也有同样的问题。我修好了

.grid-stack > .grid-stack-item > .grid-stack-item-content{
   left: 3px;
   right: 3px;
}

但不是最佳实践，我希望在javascript中配置类似的配置选项verticalMargin

var optionsLayoutDesign = {
            width: 6,
            float: true,
            removable: '.trash',
            verticalMargin:6,
            cellHeight:50,
            removeTimeout: 200,
            acceptWidgets: '.grid-stack-item',
            animate :true,
        };
$('#layout-design').gridstack(optionsLayoutDesign);

---

你需要改变课堂的风格

网格堆栈项目内容

而不是

网格堆栈项

var optionsLayoutDesign = {
            width: 6,
            float: true,
            removable: '.trash',
            verticalMargin:6,
            cellHeight:50,
            removeTimeout: 200,
            acceptWidgets: '.grid-stack-item',
            animate :true,
        };
$('#layout-design').gridstack(optionsLayoutDesign);