Gridstack-Randbreite nicht festgelegt - Elemente berühren sich in jeder Zeile

Question

Ich verwende Gridstack zum ersten Mal und habe Probleme mit den horizontalen Rändern. Offensichtlich gibt es etwas in meinem CSS, das meine Artikel zu breit macht.

Ich sehe in den Demos, dass gridstack.css links und rechts auf 10px gesetzt hat, und ich benutze das gleiche Standard css.

Ich habe eingestellt gridstack bis 6 Spalten wie folgt zu verwenden:

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

ich die folgenden Optionen bin mit:

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

und ich bin auch gridstack-extra sowie gridstack.css .

Warum haben meine Artikel überhaupt keinen horizontalen Rand?

Vielen Dank

Answer 1

Ich habe das gleiche Problem. Ich

feste

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

Aber nicht Best Practices, ich will config in Javascript-ähnliche Konfigurationsoption 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); 

Answer 2

Sie die Klasse

grid-stack-item-content

statt

stylen müssen

grid-stack-item