html - 使用 UI Kit 添加动态边距

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>