Zurb基金会最后一栏溢出到下一行

Question

我使用Zurb Foundation 5获得了简单的列布局：

<div class="row">
        <div class="small-1 columns">1</div>
        <div class="small-10 columns">10</div>
        <div class="small-1 columns">1</div>
</div>

但是在一定宽度以下，最后一列突破到下一行，即使所有内容都有足够的空间。

在这里演示：https://jsfiddle.net/kqscrxpq/

编辑：我想了解为什么要这样做，特别是考虑到仍有明显的可用空间，然后希望找到合适的解决方案。

Answer 1

这是因为small-1列的填充总共固定了30px，当small-1列的宽度小于填充时，列会断开到下一行。

例如，如果窗口大小为359px，则列的大小将为8.333333 % of 359px = 29.91px，小于填充，因此列的宽度不会小于30px。剩余空间为29.91px，30px列将中断到下一行。