Zurb基金会来源订购 - 打破侧栏专栏文章-Java 学习之路

您是否只能重新排列整列的源顺序，还是可以在移动视图的列中重新排列内容块？

我正在使用Foundation 3，我正在尝试更改移动设备上某些内容的源顺序 . 我从文档中了解到push - ＃ - mobile和pull - ＃ - mobile的工作原理，但需要做一些不同的事情 .

我们有一个两列的桌面布局：.eight.column用于主要内容，.four.column用于侧边栏 . 在移动设备中，侧边栏显示在主要内容下方 .

但是，我需要在.four.column侧边栏中显示移动视图中主要内容.eight.column的上方 . 侧栏中的其他块仍应显示在主要内容下方 .

一位同事提出的一个建议是在主要内容之上制作一个重复的内容块，这个内容是隐藏的，并使侧边栏隐藏为小型 . 我希望有一个更好的选择基金会不会让我重复代码 .

以下是我们目前拥有的代码段：

<section class="eight column">
        <article>main content</article>
    </section>

    <aside class="sidebar four column">
       <article>Some content</article>

       <article class="first-in-mobile"> This should be above the main content in mobile view
       </article>

       <article>Some more content</article>

    </aside>

基本上，Foundation 3是否为我提供了一种方法来打破其父列并在移动视图中的不同位置显示它？有关解决方法的任何建议吗？

1 回答

没有没有开箱即用的方式 . 而你同事的建议是正确的做法 . 但我知道这不是最好的，特别是如果你想要移动的那个区域有大量的内容 . 但你可以移动它，而不是重复它 . 你可以通过css或jquery来做到这一点 . 我更喜欢后者用于您的特定场景：

The layout

<div class="row" id="mainPh">
    <div class="large-8 columns" id="mainContent">
        <h1>Main content</h1>

    </div>

    <div class="large-4 columns" id="sidebar">
        <div class="panel" id="firstSidebar">
            <p>Some content</p>
        </div>
        <div class="panel" id="mobiMiddle">
            <p>Middle content</p>               
        </div>
        <div class="panel">
            <p>Some more content</p>
        </div>
    </div>
</div>

The script

<script type="text/javascript">    
    var mainContent = $("#mainContent");
    var sidebar = $("#sidebar");
    var mobiMiddle = $("#mobiMiddle");
    var mainPh = $("#mainPh");
    var firstSidebar = $("#firstSidebar");

    $(document).foundation();
    $(document).ready(function () {        

    });
    $(window).resize(function () {
        var wd = $(window).width();        
        if (wd < 768) {            
            mainPh.prepend(mobiMiddle.detach());
        }
        else {                                    
            firstSidebar.after(mobiMiddle.detach());
        }
    });
</script>

您可以将 768 更改为您要定位的设备的大小 .

回复于 2024-04-25T08:41:59+08:00

Zurb基金会来源订购 - 打破侧栏专栏文章

1 回答

相关问题