Entfernen Polsterung zwischen stapelbaren Gittern in Semantic UI

Question

Hier ist mein SemanticUI HTML:

<div class="ui stackable two column grid"> 
    <div class="column"> 
     <div class="ui list"> 
      <div class="item"> 
       Item 1 
      </div> 
      <div class="item"> 
       Item 2 
      </div> 
     </div> 
    </div> 
    <div class="column"> 
     <div class="ui list"> 
      <div class="item"> 
       Item 3 
      </div> 
      <div class="item"> 
       Item 4 
      </div> 
     </div> 
    </div> 
</div> 

Dies wird die folgende bei Desktop-Auflösungen korrekt produzieren:

Item 1   Item 3 
Item 2   Item 4 

jedoch bei mobilen Auflösungen (dh: wenn die Stapel geschieht) es ist wie diese Anzeige:

Item 1  
Item 2 
     <--- unwanted padding! 
Item 3 
Item 4 

Also, es ist in der richtigen Reihenfolge, aber jeder der Spalten hat eine Ladung von Polsterung um ihn herum.

Ich weiß, wie man das CSS überschreibt, um das Padding manuell zu entfernen, aber ich würde gerne wissen, ob es eine Möglichkeit gibt, zu erreichen, was ich mit SemanticUI machen möchte. Es muss nicht unbedingt eine Lösung sein, die Listen oder Raster/Spalten verwendet, solange ich zwei Spalten von Listen auf dem Desktop haben kann, die zu einer ununterbrochenen Liste von Elementen auf dem Handy werden.

Answer 1

I: Semantic UI Way

Sie können die SUI Thematisierung Variablen für diesen Zweck modifizieren. Hier ist, wie:

Ändern definitons/collections/grid.less

@media only screen and (max-width: @largestMobileScreen) { 
    .ui.stackable.grid { 
    width: auto; 
    margin-left: 0em !important; 
    margin-right: 0em !important; 
    } 
    .ui.stackable.grid > .row > .wide.column, 
    .ui.stackable.grid > .wide.column, 
    .ui.stackable.grid > .column.grid > .column, 
    .ui.stackable.grid > .column.row > .column, 
    .ui.stackable.grid > .row > .column, 
    .ui.stackable.grid > .column:not(.row), 
    .ui.grid > .stackable.stackable.row > .column { 
    width: 100% !important; 
    margin: 0em 0em !important; 
    box-shadow: none !important; 
    padding: (@stackableRowSpacing/2) (@stackableGutter/2) !important; 
    } 

Dies ist der Teil, 1rem der Polsterung ist das Hinzufügen, wenn Sie unter 768px gehen. CSS Änderungen:

Sie können testen, um die Lösung mit diesem CSS-Code:

@media only screen and (max-width: 767px) { 
    .ui.stackable.grid > .column:not(.row) { 
    padding: 3px !important; 
    } 
    .ui.stackable.grid > .column:first-child { 
    padding-top: 1rem !important; 
    } 
    .ui.stackable.grid > .column:last-child { 
    padding-bottom: 1rem !important; 
    } 
} 

Sie können zwischen Punkt 1 und 2

II @stackableRowSpacing Variable gleich der Polsterung ändern Ersetzen Sie 3px durch die Auffüllung zwischen zwei Elementen in derselben Spalte.

Ich würde empfehlen, nur den zusätzlichen CSS-Code zu verwenden, wenn das Problem lokalisiert ist (auf einer Seite). Wenn Sie globale padding Regeln erzwingen möchten, ist das Ändern der Themingvariablen eine gute Option.