所有视口的基础一个网格列宽？

Question

在语义 UI 中，我可以使用 .four.wide.column 在所有设备/视口上创建一个 4/16 宽列。

但在 Foundation 中，我似乎必须使用 .small-4.medium-4.large-4 来确保列在不同的设备/视口上具有相同的宽度。

Foundation 中是否有类似....all-4 列宽的东西，这样我就不必使用 .small-4.medium-4.large-4？

<!-- Semantic UI -->
<div class="ui grid">
    <div class="four wide column"></div>
</div>

<!-- Foundation -->
<div class="grid-x">
    <!-- Is there a .all-4 class? -->
    <div class="small-4 medium-4 large-4 cell"></div>
</div>

Answer 1

如果您使用 <div class="small-4 cell"></div>，它将在所有视口上具有正确的大小。

类总是被下一个更高的覆盖，例如：medium overwrites small

Answer 2

看看Foundation XY Grid Docs

.cell {
  background: #1779ba;
  color: #fefefe;
  text-align: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet" />
<div class="grid-x grid-margin-x">
  <div class="cell small-6">6 cells</div>
  <div class="cell small-6">6 cells</div>
</div>
<div class="grid-x grid-margin-x ">
  <div class="cell small-4">4 cells</div>
  <div class="cell small-4">4 cells</div>
  <div class="cell small-4">4 cells</div>
</div>

或者如果你需要，旧的 Foundation float grid docs。（这些现在默认禁用，并在 v6.4 中被替换）

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation-float.css" rel="stylesheet" />
<div class="row">
  <div class="columns small-4">4</div>
  <div class="columns small-4">4</div>
  <div class="columns small-4">4</div>
</div>
<div class="row">
  <div class="columns small-6">3</div>
  <div class="columns small-6">9</div>
</div>

所有视口的基础一个网格列宽？

Foundation one grid column width for all viewport?

css

zurb-foundation