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

Question

是否可以在 Zurb Foundation 中设置一个 cell/column 的最小宽度？该单元格包含一个列表，该列表中的某些项目正在换行，我想防止这种情况发生。 NoWrap 可防止它们换行，但它们随后会与下一列的内容重叠。

Answer 1

我假设 'Foundation Grid' 你指的是他们的 'XY Grid'... 如果是这样的话，这是一种可能的解决方案，无需添加任何额外的 CSS/SCSS 或媒体查询将在您的单元格上使用 'shrink' 和 'auto' classes（请参见下面的代码）。将 'shrink' class 与 cell/column 一起使用将使该单元格保持最长内容的宽度（在您的情况下是 unordered/ordered 列表），同时自动调整以填充剩余宽度视口与该 grid-x 行中的剩余单元格/列。如果您希望 cells/columns 堆叠在 <= 中等视口大小上，您只需将 'medium-[shrink or auto]' 更改为 'large-[shrink or auto]'。有关详细信息，请参阅 Zurb XY 网格 'Auto Sizing' 部分 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 而不是网格类来获得您想要的结果。

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

Possible to have one fixed width cell in Zurb Foundation 5 grid?

css

zurb-foundation