使用 UI 工具包添加动态边距

Question

我需要在卡片之间添加边距，但只需要内部边距。

下面的代码是响应式的。

• 大屏幕有4张卡。
• 中等屏幕有3张牌。
• 小屏幕 有2张牌。
• 微屏幕有 1 张卡。

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/css/uikit-core-rtl.css" rel="stylesheet"/>
<div class="uk-flex uk-flex-center uk-child-width-1-1 uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-4@l uk-flex-wrap">
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
</div>

我想动态添加卡片之间的边距。最好的方法是什么？

• 大屏幕有4张卡。
  • 第二张、第三张和第四张卡的边距。
• 中等屏幕有3张牌。
  • 第二张和第三张牌的剩余边距。
• 小屏幕 有2张牌。
  • 第二张卡的剩余边距。
• 微屏幕有 1 张卡。
  • 无边距

我想用CSS或UI Kit classes解决这个问题.

Answer 1

我不认为 UIkit 提供基于屏幕尺寸的特殊边距类，但您可以使用这样的媒体查询来定位它们。如果向列添加边距，它将换行到新行。您可以尝试使用左侧的白色边框来模拟边距。

@media (min-width: 1200px) { /* Large screen width in UI Kit */
.uk-card:nth-of-type(4n+2), .uk-card:nth-of-type(4n+3), .uk-card:nth-of-type(4n+4) { /* Select the 2nd, 3rd and 4th element of the row when showing 4 columns */
border-left: 10px solid white;
}
}
@media (min-width: 960px)  and (max-width: 1200px) { /* Medium screen width in UI Kit */
.uk-card:nth-of-type(3n+2), .uk-card:nth-of-type(3n+3) { /* Select the 2nd, 3rd element of the row when showing 3 columns */
border-left: 10px solid white;
}
}
@media (min-width: 640px)  and (max-width: 960px) { /* Small screen width in UI Kit */
.uk-card:nth-of-type(2n+2) { /* Select the 2nd element of the row when showing 2 columns */
border-left: 10px solid white;
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/css/uikit-core-rtl.css" rel="stylesheet" />
<div class="uk-flex uk-flex-center uk-child-width-1-1 uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-4@l uk-flex-wrap">
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
<div class="uk-card uk-card-primary uk-card-body">Foo</div>
</div>