グリッドスタックマージン幅が設定されていません - 各行でお互いが接触します

Question

グリッドスタックを初めて使用していますが、水平マージンに問題があります。明らかに、私のアイテムにはアイテムが広すぎるということが私のCSSにあります。

私は、gridstack.cssがそれぞれ10pxで左右に設定されていることをデモで確認しています。同じデフォルトCSSを使用しています。

<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> 

を、私は、次のオプション使用しています：

DEFAULT_GRIDSTACK_OPTIONS = { 
    cellHeight: 150, 
    verticalMargin: 10, 
    width: 6 
}; 

と私はgridstack-余分なだけでなく、gridstack.cssを含めていますが

は、私は次のように6列を使用するようにgridstack設定しています。

私のアイテムには何も横余白がありません。

おかげでそんなに

Answer 1

私は同じ問題をhaved。私は

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

ではなく、ベストプラクティスを固定し、私はあなたがクラスにスタイルする必要が

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

Answer 2

verticalMargin javascriptの同様の設定オプションで設定したい

grid-stack-item-content

代わりの

grid-stack-item