5

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

不幸的是，这仅适用于手机，但我也无法将其用于中等分辨率的平板电脑，因为没有等效的。

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

4

5 回答 5

7

不确定您使用的是哪个版本，但在 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>

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

于 2013-12-12T17:53:03.800 回答
2

我想出的最佳解决方案是在调整浏览器大小（或以特定大小加载）时使用 jQuery 对特定列进行一些更改。

如下所示（直接从我的项目文件中取出 - 因此您必须针对您的特定目的进行编辑）。

$(document).ready(function() {
    check_column_size();  
});

$(window).resize(function() {
    check_column_size();
});

function check_column_size() {
    if( $(window).width() >= 768 && $(window).width() <= 800 ) {
        $('section#main').removeClass( 'eight' ).addClass( 'eleven' );
        $('section#sidebar').removeClass( 'hide-for-small' ).addClass( 'hide' );
    } else {
        $('section#main').removeClass( 'eleven' ).addClass( 'eight' );
        $('section#sidebar').removeClass( 'hide' ).addClass( 'hide-for-small' );
    }
}

需要添加/删除hide-for-small类的行，因为该类包含样式

display:inherit !important;

它覆盖了任何隐藏/删除元素的尝试。因此，我需要删除该类，然后再将其重新添加，以便成功地将我的元素隐藏在“小”以上的分辨率下。

似乎适用于我的情况，但我只在一小部分进行。如果您试图同时为页面上的许多不同元素实现这一点，您可能会遇到问题。

于 2012-12-28T17:45:14.173 回答
2

您可以使用重复的内容进行此操作：

<div class="row hide-for-medium-down">
    <div class="three columns">...</div>
    <div class="three columns">...</div>
    <div class="three columns">...</div>
    <div class="three columns">...</div>
</div>
<div class="row show-for-medium-down">
    <div class="four columns">...</div>
    <div class="four columns">...</div>
    <div class="four columns">...</div>
</div>
于 2013-06-28T16:41:02.707 回答
2

我最好的建议，升级你的框架......使用基础 5，这段代码将实现你想要的：隐藏移动/平板电脑的列，并且列空间均匀。

<div class="row">
    <div class="small-4 large-3">...</div>
    <div class="small-4 large-3">...</div>
    <div class="large-3 show-for-large-up">...</div>
    <div class="small-4 large-3">...</div>
</div>

第三列对于手机和平板设备会隐藏，只显示3列；在桌面上，将显示 25% 宽度的四列。

恕我直言，这是解决此要求的最佳方法

于 2015-02-04T03:07:57.500 回答
-1

听起来您正在寻找 CSS 媒体查询。我建议您阅读下一页。

http://www.w3.org/TR/css3-mediaqueries/

也不要隐藏内容，为什么不调整它的大小，以便您的移动用户也可以查看它，除非您觉得这是一个糟糕的设计选择！

我希望这会有所帮助。

于 2012-10-23T10:21:09.470 回答