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

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

Answer 2

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

这些类总是被下一个较高的类覆盖，例如：中覆盖小类。

是否为所有视口设置一格列宽？

2 个答案: