html - 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 foundation 默认将最后一列 float 到右边:

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

Incomplete Rows

In order to work around browsers' different rounding behaviors, Foundation will float the last column in a row to the right so the edge aligns. [...]

有几种方法可以覆盖它并将最后一列移到左侧:

1。使用 .end 类 ^{(5.0.3 版本有问题)}

[...] If your row doesn't have a count that adds up to 12 columns, you can tag the last column with a class of end in order to override that behavior.

<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) ( buggy ) • 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在最后一列将其 float 到左侧:

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)