Zurb Foundation 网格将最后一列向左移动

Question

我正在尝试找出一种利用网格的好方法，而无需破解它。

我想要做的是在第一行有一个三个宽的网格（每个网格上又名 small-4），然后是第二行我希望列匹配但只有两个 small-4 元素。

通常答案是先做一个small-4，然后再做一个small-8，但由于输入设置为width: 100%，这对我不起作用。

有什么方法可以开箱即用吗？我知道偏移量，但这仅适用于设置为向右移动的项目。

目前有两个small-4 div，右侧的 div 向右浮动，这意味着它与上面的不对齐。 我可以添加一个额外的 small-4，但我想遵循这方面的最佳做法。

这里是 my code，所以你可以明白我的意思：

<div class="row">
    <div class="small-4 columns">
        <input type="text" />
    </div>
    <div class="small-4 columns">
        <input type="text" />
    </div>
    <div class="small-4 columns">
        <input type="text" />
    </div>
</div>
<div class="row">
    <div class="small-4 columns">
        <input type="text" />
    </div>
    <div class="small-4 columns">
        <input type="text" />
    </div>
</div>

Answer 1

Zurb 基础默认将float 最右边的最后一列：

[class*="column"]+[class*="column"]:last-child { /* Taken from foundation.css */
  float: right;
}

Incomplete Rows

为了解决浏览器的不同舍入行为， Foundation 会将一行中的最后一列浮动到右侧，因此 边缘对齐。 [...]

有几种方法可以覆盖它并将最后一列向左移动：

1。使用.end class ^{（5.0.3版本有问题）}

[...] 如果您的行的计数不超过 12 列，您可以 用end 类标记最后一列，以覆盖它 行为。

<div class="row">
    <div class="small-4 columns"> ... </div>
    <div class="small-4 columns end"> ... </div>
</div>

虽然 .end 预计也可以在 5.0.3 版本中工作，但它不能正常工作，因为另一个 global .end class 将覆盖它。但是，它自 5.1.0 版以来已修复。

Example (v4.1.6) • Example (v5.0.3)（越野车） • Example (v5.1.0)

相关问题可以在这里找到：

• https://github.com/zurb/foundation/issues/4215
• https://github.com/zurb/foundation/issues/4223
• https://github.com/zurb/foundation/pull/4183 [已修复：通过删除全局类]

如果您出于任何原因使用 v5.0.3，还有一些替代方案：

2。使用.left 类

一种选择是在最后一列使用.left utility class 将其浮动到左侧：

Example Here (v5.0.3)。

<div class="row">
    <div class="small-4 columns"> ... </div>
    <div class="small-4 columns left"> ... </div>
</div>

3。覆盖默认样式

另一种选择是覆盖 Zurb 基础的默认样式，如下所示：

Example Here (v5.0.3)。

.columns.end { float: left !important; }

或者类似的东西：

Example Here (v5.0.3)。

[class*="column"]+[class*="column"]:last-child {
  float: left;
}

---

4。使用源排序类

通常您可以使用*-pull-#/*-push-# source ordering classes 将列移到一边。

在这种情况下，您应该在第二行的第二列使用small-pull-4，如下所示：

<div class="row">
    <div class="small-4 columns"> ... </div>
    <div class="small-4 small-pull-4 columns"> ... </div>
</div>

WORKING DEMO。 （使用 Foundation 5.0.3）

注意：对于 Foundation 4，您应该改用 pull-4 类。查看文档中的source ordering 部分。但这仅适用于大型显示器。

UPDATED DEMO。 （使用 Foundation 4.1.6）

Answer 2

只需将最后一个 div 的类（向右的那个）更改为“small-4 columns end”