Foundation 中的自定义列大小答案

【问题标题】：Custom Column Size in FoundationFoundation 中的自定义列大小
【发布时间】：2014-03-02 15:04:29
【问题描述】：

嘿，伙计们正在这个网站上工作，我有左栏和宽右栏。现在左列介于 large-3.5 之间，右列下降约 8.5。 我的问题是我是否可以使用 id 自定义列，比如说它的宽度，如果我这样做，它仍然会响应并且表现得像普通的基础网格谢谢。

Ps：我尝试给左列一个类并将其宽度设置为 383 像素。但是布局完全崩溃了。请帮忙。谢谢。

【问题讨论】：

你试过了吗？
@simbabque 我正在我的项目中间，所以我现在害怕这样做。只是要求保证。
如果你有版本控制，分支。如果没有，请复制代码，然后在那里玩。
@simbabque 好的，让我检查一下。
@simbabque 阅读我的更新

标签： css zurb-foundation

【解决方案1】：

您可以通过查找在 /css/foundation.css 文件中调用其他列的位置并在不同浏览器大小的其他列调用旁边添加您自己的类来创建自定义列。这是一个 3.5 列的示例（请记住，您不能使用 large-3.5 作为类名）

例子：

@media only screen and (min-width: 71.250em) { 
    .large-3andAHalf { width: 35%; }
}
@media only screen and (min-width: 50em) {
    .medium-3andAHalf { width: 35%; }
}
@media only screen { {
    .small-3andAHalf { width: 35%; }
}

请务必更改媒体查询并根据您的网格使用的列数以及设置的最小宽度监视器尺寸来计算百分比，这就是 1100 像素上的 10 列网格的情况设计。

如果您使用此方法，请记住，您需要创建另一组自定义列，以使您的容器填充 100% 并且不让 1/2 列浮动（3.5 列 + 6列 ≠ 10 列），这会在您的设计中留下设计人员通常不希望出现的大空间。

【讨论】：