在Zurb Foundation 5网格中可以有一个固定宽度的单元格吗？

Question

是否可以在Zurb Foundation中将单元格/列设置为最小宽度？ 该单元格包含一个列表，该列表中的某些项目正在包装，我想防止这种情况。 NoWrap阻止它们进行换行，但是它们随后覆盖了下一列的内容。

Answer 1

我假设“ Foundation Grid”是指他们的“ XY Grid” ...如果是这种情况，则无需添加任何其他CSS / SCSS或媒体查询的一种可能解决方案是使用单元格上的“缩小”和“自动”类（请参见下面的代码）。在单元格/列中使用“缩小”类将使该单元格保持最长内容的宽度（在您的情况下为无序/有序列表），同时自动调整以用其余单元格填充视口的其余宽度/ grid-x行中的/列。如果要使单元格/列以<=中等视口大小堆叠，您只需将“ medium- [shrink or auto]”更改为“ large- [shrink or auto]”。有关更多信息，请参见Zurb XY网格的“自动调整大小”部分here。

<div class="grid-x grid-margin-x">
    <div class="cell medium-shrink">
        <ul>
            <li>No wrapping list item here that has longer content so it will be wider</li>
            <li>No wrapping list item here that has long content</li>
            <li>No wrapping list item here that has long content</li>
        </ul>
    </div>
    <div class="cell medium-auto">
        Expanded content would be here that fills in the rest of the viewport from >= medium viewport size and then stacks on small viewport size.
    </div>
</div>

Answer 2

在Zurb Foundation 5中是不可能的，只有在带有XY网格的版本6中才可以。 但是，您可以使用css而不是网格类来获得所需的结果。