Foundation 中的中心列组

Question

有没有办法在 Foundation 中将一组奇数列居中？由于不均匀，我看不出如何使用提供的偏移选项实现这一点，因为偏移必须是非整数。

下图解释了我要实现的目标。一共6个单列div，其中5个在整行居中，第一列偏移2.5列。

Answer 1

此解决方案在 Foundation 术语中略显非正统，但您的设计需要一个非正统的解决方案。

首先在 CSS 中给该行一个半列宽度的右填充； 1 列 = 8.3333% 宽度，因此此填充应为 4.1666%。

接下来给第一列也加上 4.1666% 的右边距。

现在给第二列一个 2 列的偏移量，你应该在那里（最后一列也需要 class 结束以使其与前一列左对齐）。

<div class="column first-column">...</div>
<div class="column large-1 large-offset-2">...</div>
...[other columns]...
<div class="column end">...</div>

.row { padding-right: 4.1666%; }
.first-column { margin-right: 4.1666%; !important}

您可能需要在这些不寻常的边距和填充上使用 !important（我不记得了）来覆盖列上 margin:0 的 Foundations 设置 - 如果这些填充和边距不适用，请尝试 !important没有它工作）。（注意：我在 Foundation 5 基础上工作，我没有使用早期版本）。

Foundation 中的中心列组

Center group of columns in Foundation

html

zurb-foundation

zurb-foundation-5