小编Zik*_*iki的帖子

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

我正在喋喋不休的是:我有一些内容连续的列,我想删除一些中小分辨率的列.但我希望其他列可以拉伸到页面宽度的其余部分.我该怎么做呢？

我在用

class="hide-for-medium-down"

隐藏元素,但是如何隐藏内容,以便在隐藏某些元素时将其拉伸？

我找到了两种方法,但没有一种方法可行: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)我可以像这样使用块网格:

<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>

不幸的是,这只适用于手机,但我也无法将其用于中等分辨率的平板电脑,因为没有相同的功能.

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