移除填充

Question

這裏是我的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> 

這是正常生產的桌面分辨率如下：

Item 1   Item 3 
Item 2   Item 4 

然而，在移動分辨率（即：當堆疊情況），它顯示是這樣的：那麼

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

，這是正確的順序，但每個列周圍有填充的負載。

我知道如何重寫CSS以手動刪除填充，但我想知道是否有辦法實現我想用SemanticUI做什麼。只要我可以在桌面上有兩列列表，它們就不一定是使用列表或網格/列的解決方案，而是可以在移動設備上成爲一個不間斷列表的項目。

Answer 1

我：語義UI路

可以修改此目的SUI主題化的變量。具體方法如下：

修改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; 
    } 

這是當你去下面768px，它是將填充1rem的一部分。可以修改@stackableRowSpacing變量爲項目1和2

II之間等於填充：CSS的修改：

你可以測試出與此CSS代碼的溶液：

@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; 
    } 
} 

將3px替換爲同一列中兩個項目之間的填充。

如果問題本地化（在一頁上），我建議只使用額外的CSS代碼。如果您想要執行全局的padding規則，修改主題變量是一個不錯的選擇。