html - Zurb Foundation - 删除中等屏幕的列

Question

我在 Zurb Foundation 3 中有一个站点原型(prototype)，到目前为止我有桌面版本，现在我正在调整它以负责平板电脑和手机。

我正在努力解决的问题是:我有一些连续包含内容的列，我想删除一些中小分辨率的列。但我希望其他列延伸到页面宽度的其余部分。我该如何正确地做到这一点？

我正在使用

class="hide-for-medium-down"

隐藏元素，但如何包装内容以便在隐藏某些元素时拉伸(stretch)内容？

我找到了两种方法，但都不起作用: 1)我把它作为标准的行列，例如:

<div class="row">
    <div class="three columns">...</div>
    <div class="three columns">...</div>
    <div class="three columns hide-for-medium-down">...</div>
    <div class="three columns">...</div>
</div>

但在这种情况下，第三列将保持空白。

2) 我可以像这样使用 block 网格来制作它:

<ul class="block-grid four-up">
    <li>1</li>
    <li>2</li>
    <li class="hide-for-medium-down">3</li>
    <li>4</li>
</ul>

但这次第 4 列只是向左移动到第 3 的位置，而第四列将再次留空。

我最接近的是使用 mobile-x-up 类来调整网格以减少移动设备的列 - 这种方式:

<ul class="block-grid four-up mobile-three-up">
    <li>1</li>
    <li>2</li>
    <li class="hide-for-medium-down">3</li>
    <li>4</li>
</ul>

不幸的是，这只适用于手机，但我无法将其用于中等分辨率的平板电脑，因为没有与之对应的产品。

总的来说，我的问题是:解决这个问题的最佳方法是什么？在较小的屏幕上隐藏元素同时仍保持网格的最佳方式是什么？甚至可以在中等屏幕上从网格中删除元素，同时仍保持网格正常工作吗？

Answer 1

不确定您使用的是哪个版本，但在 Foundation 5 中，试试这个...

<div class="row">
    <div class="columns small-3">...</div>
    <div class="columns small-6 large-3">...</div>
    <div class="columns small-3 hide-for-medium-down">...</div>
    <div class="columns small-3">...</div>
</div>

或者这个...

<div class="row">
    <div class="columns small-3 large-4">...</div>
    <div class="columns small-6 large-4">...</div>
    <div class="columns small-3 hide-for-medium-down">...</div>
    <div class="columns small-3 large-4">...</div>
</div>

等等，这取决于您希望剩余的列如何填充空间。