4

我正在尝试找出一种在不破解网格的情况下利用网格的好方法。

我想要做的是small-4顶行中的三个宽网格（也就是每个网格），然后是第二行，我希望列匹配但只有两个small-4元素。

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

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

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

这是我的代码，因此您可以了解我的意思：

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

2 回答 2

20

默认情况下， Zurb Foundation 将float右侧的最后一列：

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

不完整的行

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

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

1. 使用.end类（5.0.3版本有bug）

[...] 如果您的行没有最多 12 列的计数，您可以用 class of 标记最后一列end以覆盖该行为。

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

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

示例 (v4.1.6) •示例 (v5.0.3) (buggy) •示例 (v5.1.0 )

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

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

2.使用.left类

一种选择是在最后一列使用实用程序类将其浮动到左侧：.left

此处示例 （v5.0.3）。

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

3.覆盖默认样式

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

此处示例（v5.0.3）。

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

或类似的东西：

此处示例（v5.0.3）。

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

4. 使用源排序类

通常，您可以使用*-pull-#/ *-push-#source 排序类将列移到一边。

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

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

工作演示。（使用基础 5.0.3）

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

更新演示。 （使用基础 4.1.6）

于 2014-02-28T20:18:10.827 回答
1

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

于 2015-05-02T23:49:41.557 回答