使用 UI 套件添加动态边距

Question

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

下面的代码是响应式的。

大屏幕有 4 张卡片。
Medium Screens 有 3 张卡片。
小屏幕有 2 张牌。
Micro Screens 有 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 张卡片。
- 留给第二张、第三张、第四张牌的边距。
Medium Screens 有 3 张卡片。
- 留给第二张和第三张牌的边距。
小屏幕有 2 张卡片。
- 留给第二张牌的边距。
Micro Screens 有 1 张卡片。
- 没有边距

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

Answer 1

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

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

使用 UI 套件添加动态边距

Add dynamic margins using UI Kit

html

css

flexbox

getuikit