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

我：语义用户界面

您可以为此目的修改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时，这是添加1个填充的部分。您可以将@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规则，修改主题变量是一个不错的选择。

在Semantic UI中删除可堆叠网格之间的填充

1 个答案: