删除语义中可堆叠网格之间的填充 UI

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 做的事情。它不一定是使用列表或 grids/columns 的解决方案，只要我可以在桌面上有两列列表，然后在移动设备上变成一个不间断的项目列表即可。

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 之间的填充

二：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 规则，修改主题变量是一个不错的选择。

删除语义中可堆叠网格之间的填充 UI

Remove padding between stackable grids in Semantic UI

semantic-ui