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 回答