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

     

为了解决浏览器的不同舍入行为，   基金会将最后一列浮动到右边，这样就可以了   边缘对齐。 [...]

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

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的类（右边的一个）更改为＆＃34; small-4列结束＆＃34;