gridstack kenar boşluğu ayarlanmadı - öğeler her satırda birbirine dokunuyor

Question

Gridstack'ı ilk defa kullanıyorum ve yatay kenar boşlukları ile ilgili sorun yaşıyorum. Açıkçası, benim cssimde eşyalarımı çok genişleyen bir şey var.

Gridstack.css'nin her seferinde 10px'de sola ve sağa ayarladığı demoları görüyorum ve aynı varsayılan css'yi kullanıyorum.

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

Ben aşağıdaki seçenekleri kullanıyorum:

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

ve ben gridstack-ekstra yanı sıra gridstack.css dahil ediyorum

ben şöyle 6 sütun kullanmak için yukarı gridstack ayarlamış .

Öğelerim neden yatay kenar boşluğu içermiyor?

Answer 1

ben de aynı problemi yaşadım. Ben

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

Ama iyi uygulamalar sabit, seni sınıfı stil gereken

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 benzer yapılandırma seçeneğinde yapılandırma istiyoruz

grid-stack-item-content

yerine

grid-stack-item